/* Hive brand layer. Every colour, radius, shadow and motion value is a token
   from design-kit/tokens.json (--hive-*; see design-kit/tokens.css). Industry
   themes override tokens only (morph.css); this file never changes per theme. */
:root { color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: calc(var(--hive-header-height) + 12px); }
.ca-design {
  /* The kit's own variables, routed to the Hive tokens. */
  --ca-color-canvas: var(--hive-color-canvas);
  --ca-color-surface: var(--hive-color-surface);
  --ca-color-raised: var(--hive-color-raised);
  --ca-color-border: var(--hive-color-border);
  --ca-color-text: var(--hive-color-text);
  --ca-color-muted: var(--hive-color-muted);
  --ca-color-secondary: var(--hive-color-secondary);
  --ca-color-emerald: var(--hive-color-cyan-ice);
  --ca-accent: var(--hive-color-cyan-ice);
  --ca-accent-rgb: var(--hive-accent-rgb);
  --ca-focus-ring: var(--hive-focus-ring);
  --ca-font-display: var(--hive-font-display);
  --ca-body-size: var(--hive-type-1);
  --ca-body-leading: var(--hive-leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
::selection { background: var(--hive-selection-bg); color: var(--hive-color-white); }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.container { width: calc(100% - 2 * var(--hive-gutter)); max-width: var(--hive-container); margin-inline: auto; }
.section { padding-block: var(--hive-space-28); }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.eyebrow { display: flex; gap: 10px; align-items: center; color: var(--hive-color-cyan); font-size: var(--hive-type-0); font-weight: 500; letter-spacing: var(--hive-tracking-eyebrow); line-height: var(--hive-leading-snug); text-transform: var(--hive-eyebrow-transform); margin-bottom: 21px !important; }
.status-dot { width: 6px; height: 6px; background: var(--hive-dot-bg); border-radius: 50%; display: inline-block; flex: none; box-shadow: var(--hive-shadow-dot); }
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: var(--hive-type-7); line-height: var(--hive-leading-display); letter-spacing: var(--hive-tracking-display); font-weight: var(--hive-h1-weight); }
h1 em, h2 em { font-family: var(--hive-font-display); font-style: italic; font-weight: 300; letter-spacing: var(--hive-tracking-display); color: var(--hive-em-text); }
h1 em { white-space: nowrap; }
h2 { font-size: var(--hive-type-6); font-weight: var(--hive-h2-weight); line-height: var(--hive-leading-heading); letter-spacing: var(--hive-tracking-heading); }
h3 { font-size: var(--hive-type-3); line-height: var(--hive-leading-tight); font-weight: 500; letter-spacing: var(--hive-tracking-heading); }
.button { min-height: 49px; display: inline-flex; align-items: center; justify-content: center; gap: 24px; padding: 12px 23px; font-size: var(--hive-type-1); line-height: var(--hive-leading-snug); font-weight: 500; border: 1px solid var(--hive-button-border); background: var(--hive-button-bg); color: var(--hive-button-text); border-radius: var(--hive-radius-button); transition: background var(--hive-duration-fast), border-color var(--hive-duration-fast), transform var(--hive-duration-fast), box-shadow var(--hive-duration-fast); }
.button:hover { background: var(--hive-button-hover-bg); border-color: var(--hive-button-hover-border); transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button .icon { width: 17px; height: 17px; }
.button-primary { background: var(--hive-primary-bg); color: var(--hive-primary-text); border-color: var(--hive-primary-border); box-shadow: var(--hive-shadow-primary); }
.button-primary:hover { background: var(--hive-primary-hover-bg); border-color: var(--hive-primary-hover-border); box-shadow: var(--hive-shadow-primary-hover); }
.button-outline { background: var(--hive-button-outline-bg); border-color: var(--hive-button-outline-border); }
.button-small { min-height: 38px; border-radius: var(--hive-radius-button-small); padding: 8px 16px; gap: 18px; font-size: var(--hive-type-0); }
.text-link { display: inline-flex; align-items: center; gap: 14px; color: var(--hive-text-link); font-size: var(--hive-type-0); font-weight: 500; line-height: var(--hive-leading-relaxed); }
.text-link .icon { width: 17px; transition: transform var(--hive-duration-fast); }
.text-link:hover { color: var(--hive-color-cyan); }
.text-link:hover .icon { transform: translateX(4px); }
.skip-link { position: fixed; z-index: 1000; top: 10px; left: 16px; background: var(--hive-skip-bg); color: var(--hive-skip-text) !important; padding: 12px 20px; border-radius: var(--hive-radius-sm); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
/* Header: a fixed glass bar. Transparent over the hero, frosted once the page
   scrolls (app.js toggles is-scrolled). It holds the brand, the nav, the docked
   lens and the honey audit button. */
.site-header { position: fixed; inset: 0 0 auto; height: var(--hive-header-height); z-index: 30; background: var(--hive-header-bg); transition: background var(--hive-duration-surface), box-shadow var(--hive-duration-surface); }
.site-header.is-scrolled { background: var(--hive-header-scrolled-bg); box-shadow: 0 1px 0 var(--hive-header-scrolled-border); -webkit-backdrop-filter: blur(var(--hive-glass-blur)) saturate(1.3); backdrop-filter: blur(var(--hive-glass-blur)) saturate(1.3); }
.navigation { display: flex; align-items: center; height: 100%; gap: 28px; }
.brand { display: block; flex-shrink: 0; line-height: 0; }
.brand img { display: block; width: 224px; height: auto; }
.desktop-nav { display: flex; align-items: center; gap: 31px; margin-left: auto; }
.desktop-nav a { font-size: var(--hive-type-0); color: var(--hive-nav-link); transition: color var(--hive-duration-fast); padding: 12px 0; }
.desktop-nav a:hover { color: var(--hive-nav-link-hover); }
.menu-toggle { display: none; }
.mobile-nav { display: none; }
/* The docked lens: a 44 px ring of the chosen industry's footage (poster under a
   canvas that morph.js paints from the playing hero video). */
.lens-dock { display: inline-flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; color: var(--hive-color-muted); font-size: var(--hive-type-0); flex: none; transition: color var(--hive-duration-fast); }
.lens-dock:hover { color: var(--hive-color-text); }
.lens-dock-ring { position: relative; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; isolation: isolate; background: var(--hive-color-canvas); border: 1px solid color-mix(in oklab, var(--hive-color-cyan) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--hive-color-cyan) 12%, transparent), 0 0 24px color-mix(in oklab, var(--hive-color-cyan) 30%, transparent); transition: box-shadow var(--hive-duration-surface); }
.lens-dock:hover .lens-dock-ring { box-shadow: 0 0 0 3px color-mix(in oklab, var(--hive-color-cyan) 22%, transparent), 0 0 30px color-mix(in oklab, var(--hive-color-cyan) 45%, transparent); }
.lens-dock-ring img, .lens-dock-ring canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hive-lens-position, 74% 50%); }
.lens-dock-ring::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--hive-color-text) 20%, transparent), inset 0 -8px 14px color-mix(in oklab, var(--hive-color-black) 45%, transparent); }
.lens-dock-label { white-space: nowrap; }
/* The honey primary action (the free audit) with a light that follows the pointer. */
.button-honey {
  --hive-focus-ring: var(--hive-honey-focus-ring);
  --hive-primary-bg: var(--hive-honey-primary-bg);
  --hive-primary-text: var(--hive-honey-primary-text);
  --hive-primary-border: var(--hive-honey-primary-border);
  --hive-shadow-primary: var(--hive-honey-shadow-primary);
  --hive-primary-hover-bg: var(--hive-honey-primary-hover-bg);
  --hive-primary-hover-border: var(--hive-honey-primary-hover-border);
  --hive-shadow-primary-hover: var(--hive-honey-shadow-primary-hover);
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--hive-radius-pill);
  translate: var(--bx, 0px) var(--by, 0px);
}
.button-honey::before { content: ''; position: absolute; inset: -40% -20%; z-index: -1; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--hive-color-white) 45%, transparent), transparent 40%); transition: opacity var(--hive-duration-surface); }
.button-honey:hover::before { opacity: 1; }

/* Hero: full-bleed footage behind the copy, lit by the theme's glows, with a
   vertical scrim, film grain and a faint hex field. Layers, bottom to top: art,
   scrim, glow, hex, grain, then the lens (z 1), the particle canvas (z 2) and
   the copy (z 3), so the particles form over the lens but never over the words. */
.hero { position: relative; isolation: isolate; min-height: clamp(760px, 100svh, 980px); overflow: hidden; padding-top: var(--hive-header-height); background: var(--hive-color-canvas); display: grid; align-items: center; }
.hero-track { position: relative; }
.hero-art, .hero-scrim, .hero-glow, .hero-hex, .hero-grain { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-art video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: 74% 50%; mix-blend-mode: screen; }
#hero-video { filter: var(--hive-hero-video-filter); opacity: var(--hive-hero-video-opacity); }
.hero-scrim { background: var(--hive-hero-scrim); }
.hero-glow { mix-blend-mode: screen; background: radial-gradient(ellipse 34% 40% at 72% 48%, color-mix(in oklab, var(--hive-hero-glow-1) 55%, transparent), transparent 70%), radial-gradient(ellipse 40% 46% at 10% 92%, color-mix(in oklab, var(--hive-hero-glow-2) 45%, transparent), transparent 70%); transition: background var(--hive-duration-reveal); }
.hero-hex { opacity: var(--hive-hero-hex-opacity); background-color: var(--hive-color-cyan); mix-blend-mode: plus-lighter; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='146' viewBox='0 0 84 146'%3E%3Cpath d='M42 2 80 24v44L42 90 4 68V24zM42 92 80 114v44L42 180 4 158v-44z' fill='none' stroke='white' stroke-width='.8'/%3E%3C/svg%3E") repeat, radial-gradient(ellipse 60% 70% at 30% 60%, black, transparent 70%); -webkit-mask-composite: source-in; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='146' viewBox='0 0 84 146'%3E%3Cpath d='M42 2 80 24v44L42 90 4 68V24zM42 92 80 114v44L42 180 4 158v-44z' fill='none' stroke='white' stroke-width='.8'/%3E%3C/svg%3E") repeat, radial-gradient(ellipse 60% 70% at 30% 60%, black, transparent 70%); mask-composite: intersect; }
.hero-grain { opacity: var(--hive-hero-grain-opacity); mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-particles { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent, black 16%, black 82%, transparent); mask-image: linear-gradient(180deg, transparent, black 16%, black 82%, transparent); }
.hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; padding-block: 56px 72px; }
.hero-copy { position: relative; z-index: 3; max-width: 640px; }
.hero-eyebrow { margin-bottom: 25px !important; letter-spacing: var(--hive-tracking-eyebrow); color: var(--hive-hero-eyebrow-text); }
.hero h1 { margin-bottom: 27px; }
.hero-description { color: var(--hive-hero-lede-text); font-size: var(--hive-type-1); line-height: var(--hive-leading-loose); max-width: var(--hive-measure-lede); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 26px; margin-top: 29px; }
.hero-actions .button { min-height: 50px; }
.hero-reassurance { display: flex; align-items: center; gap: 14px; margin-top: 40px; }
.avatar-stack { display: flex; padding-left: 0; flex: none; }
.avatar-stack img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--hive-avatar-ring); object-fit: cover; }
.avatar-stack img + img { margin-left: -9px; }
.hero-reassurance p { color: var(--hive-reassurance-text); font-size: var(--hive-type-0); line-height: var(--hive-leading-relaxed); }
.hero-reassurance p span { color: var(--hive-reassurance-muted); }
/* The quiet motion control: a glass disc in the hero's corner (hero-motion.js and
   morph-art.js set data-state and the label). */
.hero-motion-toggle { position: absolute; z-index: 4; right: max(var(--hive-gutter), calc((100% - var(--hive-container)) / 2)); bottom: 28px; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border: 1px solid var(--hive-hero-control-border); border-radius: 50%; background: var(--hive-hero-control-bg); color: var(--hive-hero-control-text); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: border-color var(--hive-duration-fast), color var(--hive-duration-fast); }
.hero-motion-toggle:hover { border-color: var(--hive-glass-highlight); color: var(--hive-color-text); }
.hero-motion-toggle .icon { width: 16px; height: 16px; grid-area: 1 / 1; }
.hero-motion-toggle[data-state="paused"] .icon-pause, .hero-motion-toggle:not([data-state="paused"]) .icon-play { display: none; }
.hero-note { text-wrap: pretty; margin-top: 16px; font-size: var(--hive-type-0); line-height: var(--hive-leading-body); color: var(--hive-hero-note-text); max-width: var(--hive-measure-note); }
.promise-strip { border-block: 1px solid var(--hive-promise-border); background: var(--hive-promise-bg); padding: 27px 0; }
.promise-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.promise-inner p { font-size: var(--hive-type-1); line-height: var(--hive-leading-body); color: var(--hive-promise-text); }
.promise-inner p em { color: var(--hive-promise-em); font-style: normal; }
.promise-inner > span { display: flex; align-items: center; gap: 10px; font-size: var(--hive-type-1); line-height: var(--hive-leading-body); color: var(--hive-promise-item); }
.promise-inner .icon { width: 17px; height: 17px; color: var(--hive-promise-icon); }
.promise-inner p a { color: inherit; text-decoration: underline; text-decoration-color: var(--hive-promise-underline); text-underline-offset: 5px; }
.promise-inner p a:hover { text-decoration-color: currentColor; }
.promise-inner p strong, .founding-banner strong, .offer-note strong { font-weight: 500; }
.section-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; margin-bottom: var(--hive-space-12); }
.section-intro > p { max-width: 350px; color: var(--hive-color-muted); font-size: var(--hive-type-1); line-height: var(--hive-leading-loose); margin-bottom: 4px; }

/* What we do: three starting points. The tone attribute selects a card tint. */
.outcome-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hive-space-6); }
.outcome-card { padding: 30px; border: var(--hive-border-width) solid var(--hive-outcome-border); border-radius: var(--hive-radius-card); background: var(--hive-outcome-bg); display: flex; flex-direction: column; align-items: flex-start; }
.outcome-card:where([data-tone="teal"]) { --hive-outcome-accent: var(--hive-tone-teal-outcome-accent); --hive-outcome-border: var(--hive-tone-teal-outcome-border); --hive-outcome-bg: var(--hive-tone-teal-outcome-bg); }
.outcome-card:where([data-tone="amber"]) { --hive-outcome-accent: var(--hive-tone-amber-outcome-accent); --hive-outcome-border: var(--hive-tone-amber-outcome-border); --hive-outcome-bg: var(--hive-tone-amber-outcome-bg); }
.outcome-card > .icon { color: var(--hive-outcome-accent); width: 26px; height: 26px; margin-bottom: 25px; }
.outcome-number { color: var(--hive-outcome-accent); font-size: var(--hive-type-0); margin-bottom: 13px; }
.outcome-card h3 { font-size: var(--hive-type-3); margin-bottom: 17px; }
.outcome-card p { font-size: var(--hive-type-1); line-height: var(--hive-leading-relaxed); color: var(--hive-color-muted); margin-bottom: 25px; }
.outcome-card .text-link { margin-top: auto; color: var(--hive-outcome-accent); font-size: var(--hive-type-1); }

/* Example: one website enquiry on the Business plan, in three panels. */
.connected-section { position: relative; isolation: isolate; overflow: hidden; padding-block: 87px 55px; border-block: 1px solid var(--hive-example-border); background: var(--hive-example-bg); }
.noscript-note { color: var(--hive-noscript-text); font-size: var(--hive-type-0); line-height: var(--hive-leading-loose); }
.noscript-note a { text-decoration: underline; }
.example-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hive-space-6); }
.example-step h3 { font-size: var(--hive-type-2); margin: 14px 0 16px; }
.example-panel { border: var(--hive-border-width) solid var(--hive-color-border); border-radius: var(--hive-radius-card); background: var(--hive-example-panel-bg); padding: 20px 22px; }
.example-panel small { display: block; font-size: var(--hive-type-0); letter-spacing: var(--hive-tracking-label); text-transform: uppercase; color: var(--hive-example-label); margin-bottom: 10px; }
.example-panel p { font-size: var(--hive-type-1); line-height: var(--hive-leading-relaxed); color: var(--hive-example-text); }
.example-note { margin-top: 28px; font-size: var(--hive-type-0); line-height: var(--hive-leading-relaxed); color: var(--hive-color-muted); max-width: var(--hive-measure-prose); }

/* How it works: the free audit, three steps and one button. */
.steps { padding: 0; margin: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px; }
.steps li { border-top: 1px solid var(--hive-step-border); padding-top: 26px; position: relative; }
.steps li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--hive-step-dot); box-shadow: var(--hive-shadow-step-dot); position: absolute; top: -4px; }
.step-number { font-family: var(--hive-font-display); font-style: italic; color: var(--hive-step-number); font-size: var(--hive-type-4); }
.steps h3 { font-size: var(--hive-type-2); margin: 18px 0 13px; }
.steps p { color: var(--hive-color-muted); font-size: var(--hive-type-1); line-height: var(--hive-leading-loose); margin-bottom: 24px; }
.step-caption { font-size: var(--hive-type-0); color: var(--hive-step-caption); }
.audit-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 44px; }
.audit-cta > span { font-size: var(--hive-type-0); color: var(--hive-color-muted); }
.sample-audit { margin-top: 40px; max-width: var(--hive-measure-prose); border-block: 1px solid var(--hive-color-border); }
.sample-audit summary { padding: 17px 0; cursor: pointer; font-size: var(--hive-type-1); color: var(--hive-audit-summary); }
.sample-audit summary span { color: var(--hive-color-muted); font-size: var(--hive-type-0); }
.sample-audit-body { padding-bottom: 22px; }
.sample-audit-body > p { font-size: var(--hive-type-0); color: var(--hive-color-muted); margin-bottom: 12px; }
.sample-audit-body ol { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.sample-audit-body li { font-size: var(--hive-type-1); line-height: var(--hive-leading-relaxed); color: var(--hive-audit-item); }
.sample-audit-body strong { font-weight: 500; color: var(--hive-audit-strong); }

/* Plans: the founding offer above the cards; the plan terms explained once. */
.plans-section { background: var(--hive-plans-bg); border-block: 1px solid var(--hive-plans-border); }
.center-intro { text-align: center; margin-bottom: 63px; }
.center-intro .eyebrow { justify-content: center; }
.center-intro > p:last-child { color: var(--hive-color-muted); font-size: var(--hive-type-1); line-height: var(--hive-leading-loose); margin-top: 22px; }
.founding-banner { text-wrap: balance; max-width: var(--hive-measure-prose); margin: -28px auto 46px !important; padding: 13px 20px; text-align: center; font-size: var(--hive-type-1); line-height: var(--hive-leading-body); color: var(--hive-banner-text); border: 1px solid var(--hive-banner-border); border-radius: var(--hive-radius-banner); background: var(--hive-banner-bg); }
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.pricing-card-stage { position: relative; display: flex; min-width: 0; }
.pricing-card-stage > .pricing-card { width: 100%; }
.pricing-card { position: relative; border: var(--hive-border-width) solid var(--hive-plan-border); border-radius: var(--hive-radius-plan); padding: 31px 27px; background: var(--hive-plan-bg); transition: border-color var(--hive-duration-surface); }
.pricing-card.plan-highlight { border-color: var(--hive-plan-highlight-border); box-shadow: var(--hive-shadow-plan-highlight); }
.plan-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 23px; }
.plan-heading > span { color: var(--hive-plan-label); font-size: var(--hive-type-0); }
.plan-heading .icon { color: var(--hive-plan-icon); width: 22px; height: 22px; }
.pricing-card h3 { font-size: var(--hive-type-3); font-weight: 500; margin-bottom: 6px; }
.plan-description { font-size: var(--hive-type-0); line-height: var(--hive-leading-body); color: var(--hive-plan-description); min-height: 76px; }
.plan-description strong { font-weight: 500; }
.price { display: flex; align-items: baseline; font-size: var(--hive-type-7); line-height: var(--hive-leading-none); letter-spacing: var(--hive-tracking-display); font-weight: 400; margin: 23px 0 13px !important; }
.price .currency { font-size: var(--hive-type-2); letter-spacing: var(--hive-tracking-heading); align-self: flex-start; margin-top: 7px; margin-right: 6px; color: var(--hive-price-currency); }
.price .period { font-size: var(--hive-type-0); color: var(--hive-price-period); letter-spacing: var(--hive-tracking-body); margin-left: 10px; }
.price-caption { font-size: var(--hive-type-0); color: var(--hive-price-caption); margin-bottom: 24px !important; }
.pricing-card .button { width: 100%; font-size: var(--hive-type-0); padding-inline: 15px; justify-content: space-between; }
.pricing-card .button-outline { background: var(--hive-plan-button-bg); border-color: var(--hive-plan-button-border); color: var(--hive-plan-button-text); }
.pricing-card .button-outline:hover { background: var(--hive-plan-button-hover-bg); border-color: var(--hive-plan-button-hover-border); color: var(--hive-plan-button-hover-text); }
.plan-features { border-top: 1px solid var(--hive-plan-divider); margin-top: 27px; padding-top: 23px; }
.plan-features > p { font-size: var(--hive-type-0); color: var(--hive-plan-features-heading); margin-bottom: 19px; }
.plan-features ul { display: grid; gap: 14px; }
.plan-features li { color: var(--hive-plan-feature); font-size: var(--hive-type-0); line-height: var(--hive-leading-body); display: flex; align-items: baseline; gap: 10px; }
.plan-features li::before { content: '✓'; color: var(--hive-plan-check); font-size: var(--hive-type-0); }
.featured { --hive-plan-bg: var(--hive-plan-featured-bg); --hive-plan-border: var(--hive-plan-featured-border); --hive-plan-label: var(--hive-plan-featured-label); border-top-left-radius: 0; border-top-right-radius: 0; }
.recommended { position: absolute; left: -1px; right: -1px; top: -24px; height: 24px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--hive-ribbon-border); border-bottom: none; border-radius: var(--hive-radius-ribbon) var(--hive-radius-ribbon) 0 0; color: var(--hive-ribbon-text); background: var(--hive-ribbon-bg); font-size: var(--hive-type-0); letter-spacing: var(--hive-tracking-label); }
.plans-note { color: var(--hive-plans-note); font-size: var(--hive-type-0); line-height: var(--hive-leading-loose); text-align: center; margin: 27px auto 25px !important; max-width: 850px; }
.plan-help { display: flex; justify-content: center; align-items: center; gap: 13px; font-size: var(--hive-type-0); margin-top: 6px; }
.plan-help > span { color: var(--hive-plan-help); }
.plan-help .text-link { color: var(--hive-plan-help-link); font-size: var(--hive-type-0); }
.workflow-explainer { max-width: 730px; margin: 0 auto; border-block: 1px solid var(--hive-color-border); }
.workflow-explainer summary { padding: 17px 0; cursor: pointer; font-size: var(--hive-type-1); }
.workflow-explainer p { font-size: var(--hive-type-1); color: var(--hive-color-muted); line-height: var(--hive-leading-loose); padding-bottom: 20px; }
.workflow-explainer dl { padding-bottom: 20px; }
.workflow-explainer dt { font-size: var(--hive-type-1); color: var(--hive-explainer-term); margin-top: 14px; }
.workflow-explainer dd { margin: 4px 0 0; font-size: var(--hive-type-1); line-height: var(--hive-leading-relaxed); color: var(--hive-color-muted); }
/* Plan tints (Website teal, Growth amber); Business keeps the brand blue. The
   tone sets the card's own tokens at zero specificity, so a theme can still
   override them from morph.css. */
.pricing-card:where([data-tone="teal"]) { --hive-tone-accent-rgb: var(--hive-tone-teal-accent-rgb); --hive-tone-accent-light: var(--hive-tone-teal-accent-light); --hive-tone-surface: var(--hive-tone-teal-surface); }
.pricing-card:where([data-tone="amber"]) { --hive-tone-accent-rgb: var(--hive-tone-amber-accent-rgb); --hive-tone-accent-light: var(--hive-tone-amber-accent-light); --hive-tone-surface: var(--hive-tone-amber-surface); }
.pricing-card:where([data-tone]) {
  --hive-plan-border: rgb(var(--hive-tone-accent-rgb) / .32);
  --hive-plan-bg: linear-gradient(165deg, rgb(var(--hive-tone-accent-rgb) / .13), transparent 55%), var(--hive-tone-surface);
  --hive-plan-label: var(--hive-tone-accent-light);
  --hive-plan-icon: var(--hive-tone-accent-light);
  --hive-plan-button-bg: rgb(var(--hive-tone-accent-rgb) / .13);
  --hive-plan-button-border: rgb(var(--hive-tone-accent-rgb) / .45);
  --hive-plan-button-text: var(--hive-tone-accent-light);
  --hive-plan-button-hover-bg: rgb(var(--hive-tone-accent-rgb) / .22);
  --hive-plan-button-hover-border: rgb(var(--hive-tone-accent-rgb) / .8);
  --hive-plan-button-hover-text: var(--hive-color-white);
  --hive-plan-divider: rgb(var(--hive-tone-accent-rgb) / .2);
  --hive-plan-check: rgb(var(--hive-tone-accent-rgb));
  --hive-plan-highlight-border: var(--hive-tone-accent-light);
  --hive-shadow-plan-highlight: 0 0 30px rgb(var(--hive-tone-accent-rgb) / .18);
}

/* Founders. */
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 360px)); gap: 27px; }
.founder-image { overflow: hidden; aspect-ratio: 1 / 1.03; background: var(--hive-founder-bg); border-radius: var(--hive-radius-2xl); border: 1px solid var(--hive-founder-border); }
.founder img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform var(--hive-duration-reveal) var(--hive-ease-out-soft); }
.founder:hover img { transform: scale(1.025); }
.founder-info { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.founder-info h3 { font-size: var(--hive-type-2); }
.founder-info > span { font-size: var(--hive-type-0); color: var(--hive-founder-role); }

/* FAQ: the audit button stays in view beside the answers on wide screens. */
.faq-section { padding-top: 55px; }
.faq-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 70px; }
.faq-aside > .button { margin-top: 30px; }
.faq-aside > .text-link { display: flex; margin-top: 28px; color: var(--hive-faq-link); font-size: var(--hive-type-0); }
.faq-list { border-top: 1px solid var(--hive-faq-border); }
.faq-list details { border-bottom: 1px solid var(--hive-faq-border); }
.faq-list summary { min-height: 69px; padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; font-size: var(--hive-type-1); color: var(--hive-faq-question); list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:focus-visible { outline: var(--hive-faq-focus-outline); outline-offset: 4px; border-radius: 2px; }
.faq-list summary:hover { color: var(--hive-faq-question-hover); }
.faq-plus { width: 14px; height: 14px; position: relative; flex: none; }
.faq-plus::before, .faq-plus::after { content: ''; position: absolute; height: 1px; width: 12px; top: 7px; left: 1px; background: var(--hive-faq-plus); transition: transform var(--hive-duration-fast); }
.faq-plus::after { transform: rotate(90deg); }
details[open] .faq-plus::after { transform: rotate(0); }
.faq-list details p { padding: 0 26px 22px 0; font-size: var(--hive-type-1); line-height: var(--hive-leading-loose); color: var(--hive-color-muted); }
@media (min-width: 1001px) { .faq-aside { position: sticky; top: 40px; align-self: start; } }

/* Contact and the audit request form (the honey-lit panel). */
.contact-section { position: relative; background: var(--hive-contact-bg); border-top: 1px solid var(--hive-contact-border); }
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 85px; align-items: center; }
.contact-copy h2 { font-size: var(--hive-type-7); line-height: var(--hive-leading-heading); letter-spacing: var(--hive-tracking-display); }
.contact-copy > p:not(.eyebrow) { color: var(--hive-contact-lede); margin-top: 29px; font-size: var(--hive-type-1); line-height: var(--hive-leading-loose); }
.offer-note { margin-top: 22px !important; padding-left: 14px; border-left: 2px solid var(--hive-offer-note-rule); font-size: var(--hive-type-1); line-height: var(--hive-leading-relaxed); }
.contact-copy > p.offer-note { color: var(--hive-offer-note-text); }
.contact-founders { display: flex; align-items: center; gap: 14px; margin-top: 32px; }
.contact-founders > span { font-size: var(--hive-type-0); line-height: var(--hive-leading-body); color: var(--hive-contact-founders-text); }
.direct-contact { display: inline-flex; gap: 10px; align-items: center; font-size: var(--hive-type-1); color: var(--hive-link-text) !important; margin-top: 30px; }
.direct-contact:hover { text-decoration: underline; text-underline-offset: 5px; }
.contact-panel {
  --hive-focus-ring: var(--hive-honey-focus-ring);
  --hive-primary-bg: var(--hive-honey-primary-bg);
  --hive-primary-text: var(--hive-honey-primary-text);
  --hive-primary-border: var(--hive-honey-primary-border);
  --hive-shadow-primary: var(--hive-honey-shadow-primary);
  --hive-primary-hover-bg: var(--hive-honey-primary-hover-bg);
  --hive-primary-hover-border: var(--hive-honey-primary-hover-border);
  --hive-shadow-primary-hover: var(--hive-honey-shadow-primary-hover);
  padding: var(--hive-space-8); background: var(--hive-contact-panel-bg); border: var(--hive-border-width) solid var(--hive-contact-panel-border); border-radius: var(--hive-radius-card); box-shadow: var(--hive-shadow-panel);
}
.contact-panel > h3 { font-size: var(--hive-type-3); margin-bottom: 7px; }
.contact-panel > p { color: var(--hive-contact-panel-text); font-size: var(--hive-type-0); margin-bottom: 24px; }
#enquiry-form { display: grid; gap: var(--hive-space-4); }
#enquiry-form label { display: grid; gap: 7px; font-size: var(--hive-type-0); line-height: var(--hive-leading-snug); color: var(--hive-form-label); }
#enquiry-form .optional { color: var(--hive-form-optional); font-size: var(--hive-type-0); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#enquiry-form :is(input, select, textarea) { width: 100%; min-width: 0; border: 1px solid var(--hive-input-border); background: var(--hive-input-bg); border-radius: var(--hive-radius-input); color: var(--hive-input-text); padding: 11px 12px; font-size: var(--hive-type-1); line-height: var(--hive-leading-body); transition: border-color var(--hive-duration-fast); }
#enquiry-form :is(input, select, textarea):hover { border-color: var(--hive-input-hover-border); }
#enquiry-form :is(input, select, textarea):focus-visible { border-color: var(--hive-input-focus-border); outline: var(--hive-focus-ring); outline-offset: 3px; }
#enquiry-form :is(input, textarea)::placeholder { color: var(--hive-input-placeholder); opacity: 1; }
#enquiry-form textarea { resize: vertical; min-height: 91px; }
#enquiry-form select { appearance: none; background-image: var(--hive-select-arrow); background-repeat: no-repeat; background-position: right 11px center; padding-right: 34px; }
.form-submit { justify-content: space-between; margin-top: 3px; font-size: var(--hive-type-1); }
.form-submit:disabled { opacity: .7; cursor: progress; }
.form-note { font-size: var(--hive-type-0); color: var(--hive-form-note-text); line-height: var(--hive-leading-relaxed); }
.form-alt { font-size: var(--hive-type-0); color: var(--hive-form-alt-text); }
.form-alt .direct-contact { margin-top: 0; font-size: var(--hive-type-0); color: var(--hive-form-alt-link) !important; }
.form-result { background: var(--hive-result-bg); border: 1px solid var(--hive-result-border); border-radius: var(--hive-radius-sm); padding: 15px; font-size: var(--hive-type-0); line-height: var(--hive-leading-relaxed); }
.form-result p { font-size: var(--hive-type-0); color: var(--hive-result-text); margin: 4px 0 8px; }
.form-result .text-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; font-size: var(--hive-type-0); color: var(--hive-result-link); }
.form-result .button { font-size: var(--hive-type-0); min-height: 40px; margin: 6px 0 12px; width: 100%; }
.form-note a, .plans-note a, .footer-bottom p a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Spam trap: hidden from people and assistive tech, still in the form for bots. */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Footer. */
.site-footer { background: var(--hive-footer-bg); padding: 43px 0 24px; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 35px; padding-bottom: 35px; }
.footer-brand img { width: 196px; }
.footer-top > div > p { color: var(--hive-footer-text); font-size: var(--hive-type-0); line-height: var(--hive-leading-relaxed); margin-top: 11px; }
.footer-top nav { display: flex; gap: 31px; margin-left: auto; font-size: var(--hive-type-0); color: var(--hive-footer-link); }
.footer-top nav a:hover { color: var(--hive-footer-link-hover); }
.footer-top nav span { padding-left: 9px; color: var(--hive-color-cyan); }
.back-to-top { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--hive-footer-button-border); border-radius: 50%; font-size: var(--hive-type-1); color: var(--hive-footer-button-text) !important; margin-left: 40px; }
.back-to-top:hover { background: var(--hive-footer-button-hover-bg); }
.footer-bottom { border-top: 1px solid var(--hive-footer-divider); padding-top: 22px; display: flex; justify-content: space-between; gap: 20px; font-size: var(--hive-type-0); color: var(--hive-footer-fine-text); }
.mobile-only { display: none; }

/* Founding offer: shown until 31 December 2026 (Sydney), then the standard terms. */
[data-offer="standard"] { display: none; }
.offer-ended [data-offer="founding"] { display: none; }
.offer-ended [data-offer="standard"] { display: revert; }

/* Phones: a free-audit button that appears once the hero's button has gone. */
.sticky-cta { display: none; }

/* Motion: section reveals and the hero entrance. */
@media (prefers-reduced-motion: no-preference) {
  .reveal.is-pending { opacity: 0; transform: translateY(var(--hive-reveal-rise)); }
  .reveal { transition: opacity var(--hive-duration-reveal) var(--hive-ease-standard), transform var(--hive-duration-reveal) var(--hive-ease-standard); }
  /* Load choreography: header, eyebrow, headline, lede, actions, lens, in a
     90 ms stagger (--i), with the italic headline line a beat behind the first.
     Every keyframe ends at the resting state, so a reduced-motion or
     already-painted page looks the same. The is-entering class is removed by
     morph.js once the entrance has played (or the first morph starts), so the
     word morph never re-triggers the em rise on the elements it creates. */
  .hero-enter { animation: hero-rise var(--hive-duration-hero-enter) var(--hive-ease-out-soft) both; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
  .site-header.hero-enter { animation-name: header-rise; }
  .hero.is-entering h1 > em { animation: hero-rise var(--hive-duration-hero-enter) var(--hive-ease-out-soft) both; animation-delay: calc(2 * 90ms + 230ms); }
  .hero-art { animation: art-enter var(--hive-duration-art-enter) var(--hive-ease-out-soft) both; }
  @keyframes hero-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @keyframes header-rise { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  @keyframes art-enter { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
}
@media (max-width: 1150px) {
  .container { --hive-gutter: var(--hive-gutter-laptop); }
  .promise-inner { flex-wrap: wrap; justify-content: center; gap: 14px 35px; }
  .promise-inner p { width: 100%; text-align: center; margin-bottom: 6px; }
  .desktop-nav { gap: 23px; }
  .navigation { gap: 22px; }
  .lens-dock-label { display: none; }
  .section-intro { gap: 35px; }
  .pricing-card { padding: 28px 21px; }
  .contact-layout { gap: 45px; }
  .contact-panel { padding: 27px; }
  .footer-top nav { gap: 24px; }
  .back-to-top { margin-left: 10px; }
}
@media (max-width: 1199px) {
  .hero-inner { grid-template-columns: 1fr; justify-items: start; gap: 56px; padding-block: 40px 64px; }
  .hero-copy { max-width: 650px; }
}
@media (max-width: 1000px) {
  .outcome-grid { gap: 16px; }
  .outcome-card { padding: 24px; }
}
@media (min-width: 701px) and (max-width: 1000px) { .example-flow { gap: 16px; } .example-panel { padding: 18px; } }
@media (max-width: 900px) {
  .desktop-nav { gap: 18px; }
  .brand img { width: 196px; }
  .nav-contact { gap: 10px; }
  .section { padding-block: 85px; }
  .section-intro { align-items: flex-start; flex-direction: column; gap: 25px; }
  .section-intro > p { max-width: 520px; }
  .steps { gap: 27px; }
  .pricing-grid { gap: 14px; }
  .pricing-card { padding: 25px 17px; }
  .price .period { margin-left: 5px; }
  .plan-features { min-height: 285px; }
  .plan-features li { gap: 7px; }
  .pricing-card .button { padding-inline: 12px; gap: 6px; }
  .team-grid { gap: 20px; }
  .faq-layout { grid-template-columns: 1fr; gap: 35px; }
  .contact-layout { grid-template-columns: 1fr; gap: 40px; }
  .contact-panel { max-width: 590px; width: 100%; padding: var(--hive-space-8); }
}
@media (max-width: 700px) {
  :root { scroll-padding-top: calc(var(--hive-header-height-phone) + 12px); }
  .container { --hive-gutter: var(--hive-gutter-phone); }
  .section { padding-block: 72px; }
  .navigation { gap: 12px; }
  .site-header { height: var(--hive-header-height-phone); }
  .lens-dock { margin-left: auto; }
  .desktop-nav, .nav-contact { display: none; }
  .brand img { width: 178px; }
  .menu-toggle { display: flex; width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--hive-menu-toggle-border); border-radius: var(--hive-radius-sm); background: var(--hive-menu-toggle-bg); }
  .menu-toggle span { display: block; width: 17px; height: 1px; background: var(--hive-menu-toggle-bar); transition: transform var(--hive-duration-fast); }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .mobile-nav { display: flex; flex-direction: column; margin: 8px 16px; padding: 12px 20px; background: var(--hive-glass-bg); border: 1px solid var(--hive-glass-border); border-radius: var(--hive-radius-menu); backdrop-filter: blur(var(--hive-glass-blur)); box-shadow: var(--hive-shadow-menu); }
  .mobile-nav a { padding: 15px 2px; color: var(--hive-mobile-nav-link); display: flex; justify-content: space-between; }
  .mobile-nav a + a { border-top: 1px solid var(--hive-mobile-nav-divider); }
  .mobile-nav span { color: var(--hive-color-cyan); }
  .mobile-nav a.mobile-nav-cta { margin-top: 8px; padding: 14px 16px; border: 1px solid var(--hive-mobile-cta-border); border-radius: var(--hive-radius-mobile-cta); background: var(--hive-mobile-cta-bg); color: var(--hive-mobile-cta-text); }
  .mobile-nav a.mobile-nav-cta + a, .mobile-nav a + a.mobile-nav-cta { border-top: 1px solid var(--hive-mobile-cta-divider); }
  .hero { min-height: unset; padding-top: var(--hive-header-height-phone); }
  .hero-inner { padding-top: 40px; padding-bottom: 72px; gap: 60px; }
  .hero-scrim { background: var(--hive-hero-scrim-compact); }
  .hero-copy { max-width: 520px; }
  .hero-eyebrow { margin-bottom: 24px !important; }
  .hero h1 { margin-bottom: 22px; }
  .hero-actions { margin-top: 26px; }
  .hero-actions .button { min-height: 50px; padding-inline: 20px; gap: 17px; width: 100%; justify-content: space-between; }
  .hero-actions > .text-link { gap: 8px; }
  .hero-actions > .text-link, .plan-help .button { padding-block: 10px; }
  .hero-reassurance { margin-top: 26px; }
  .hero-motion-toggle { bottom: 18px; }
  .promise-strip { padding: 26px 0; }
  .promise-inner { gap: 13px 19px; }
  .promise-inner p { margin-bottom: 8px; }
  .promise-inner > span { gap: 8px; }
  .promise-inner > span:last-child { width: 100%; justify-content: center; }
  .eyebrow { margin-bottom: 17px !important; }
  .section-intro { gap: 21px; margin-bottom: 34px; }
  .outcome-grid { grid-template-columns: 1fr; }
  .outcome-card { padding: 27px; }
  .outcome-card > .icon { margin-bottom: 18px; }
  .outcome-card h3 br { display: none; }
  .example-flow { grid-template-columns: 1fr; gap: 28px; }
  .example-step h3 { margin: 10px 0 12px; }
  .steps { grid-template-columns: 1fr; gap: 30px; margin-top: 44px; }
  .steps li { padding: 23px 0 0 52px; }
  .steps .step-number { position: absolute; left: 0; top: 24px; }
  .steps h3 { margin-top: 1px; }
  .steps p { margin-bottom: 15px; }
  .audit-cta { margin-top: 32px; }
  .audit-cta .button { width: 100%; justify-content: space-between; }
  .center-intro { text-align: left; margin-bottom: 34px; }
  .center-intro .eyebrow { justify-content: flex-start; }
  .mobile-only { display: block; }
  .founding-banner { margin: -10px 0 34px !important; text-align: left; }
  .pricing-grid { grid-template-columns: 1fr; gap: 40px; }
  .pricing-card { padding: 28px; }
  .plan-heading { margin-bottom: 20px; }
  .plan-description { min-height: 0; }
  .price { margin-top: 28px !important; }
  .price .period { margin-left: 10px; }
  .pricing-card .button { padding-inline: 17px; }
  .plan-features { min-height: unset; }
  .plan-features li { gap: 11px; }
  .plans-note { text-align: left; margin-top: 25px !important; }
  .plan-help { flex-direction: column; align-items: flex-start; gap: 4px; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .founder-image { aspect-ratio: 1 / 1; }
  .founder-info { margin-top: 15px; flex-direction: column; align-items: flex-start; gap: 2px; }
  .faq-section { padding-top: 10px; }
  .contact-panel { padding: 23px; }
  .form-row { grid-template-columns: 1fr; gap: 16px; }
  .footer-top { flex-wrap: wrap; align-items: flex-start; gap: 30px 15px; }
  .footer-top > div { width: 100%; }
  .footer-top nav { display: grid; grid-template-columns: 1fr 1fr; width: calc(100% - 70px); gap: 20px; margin-left: 0; }
  .footer-top .back-to-top { margin-left: auto; margin-top: 3px; }
  .footer-bottom { flex-direction: column; gap: 10px; }
  .sticky-cta { display: flex; position: fixed; z-index: 40; left: 16px; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); justify-content: center; min-height: 52px; box-shadow: var(--hive-shadow-sticky); transform: translateY(calc(100% + 24px)); visibility: hidden; transition: transform var(--hive-duration-base), visibility var(--hive-duration-base); }
  .sticky-cta.is-visible { transform: none; visibility: visible; }
  .site-footer { padding-bottom: 88px; }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }
@media (max-width: 370px) {
  .container { --hive-gutter: var(--hive-gutter-compact); }
  .pricing-card { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal.is-pending { opacity: 1; transform: none; }
}

/* Plan cards tilt towards the pointer. The stationary stage keeps hit testing
   steady while its card and layers tilt. */
@media (hover: hover) and (pointer: fine) and (min-width: 701px) and (prefers-reduced-motion: no-preference) {
  .pricing-card-stage { perspective: 1100px; }
  .pricing-card-stage .pricing-card {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --parallax-x: 0px;
    --parallax-y: 0px;
    --tilt-presence: 0;
    transform-style: preserve-3d;
    transform: translateY(calc(var(--tilt-presence) * -4px)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  }
  .pricing-card-stage.is-tilting { z-index: 2; }
  .pricing-card-stage.is-tilting .pricing-card {
    will-change: transform;
    box-shadow: 0 20px 42px rgb(0 0 0 / calc(var(--tilt-presence) * .3)),
      0 0 28px rgb(var(--hive-tone-accent-rgb, var(--hive-accent-rgb)) / calc(var(--tilt-presence) * .1));
  }
  .pricing-card-stage .pricing-card > * {
    --layer-depth: 12px;
    --layer-drift: .4;
    transform: translate3d(calc(var(--parallax-x) * var(--layer-drift)), calc(var(--parallax-y) * var(--layer-drift)), calc(var(--layer-depth) * var(--tilt-presence)));
  }
  .pricing-card-stage .pricing-card > .price { --layer-depth: 42px; --layer-drift: 1.4; }
  .pricing-card-stage .pricing-card > .recommended { --layer-depth: 32px; --layer-drift: 1; }
  .pricing-card-stage .pricing-card > h3 { --layer-depth: 26px; --layer-drift: .8; }
  .pricing-card-stage .pricing-card > .plan-heading { --layer-depth: 20px; --layer-drift: .65; }
  .pricing-card-stage .pricing-card > .button { --layer-depth: 18px; --layer-drift: .45; transition: background var(--hive-duration-fast), border-color var(--hive-duration-fast), box-shadow var(--hive-duration-fast); }
  .pricing-card-stage .pricing-card > .plan-features { --layer-depth: 5px; --layer-drift: .15; }
}

/* Privacy notice and other plain text pages. */
.legal-page { background: var(--hive-color-canvas); }
.legal-header .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 24px; border-bottom: 1px solid var(--hive-hairline); }
.legal-body { max-width: var(--hive-measure-prose); padding-block: 64px 88px; }
.legal-body h1 { font-size: var(--hive-type-7); margin: 14px 0 10px; }
.legal-body h2 { font-size: var(--hive-type-3); margin: 44px 0 12px; }
.legal-body p, .legal-body li { font-size: var(--hive-type-1); line-height: var(--hive-leading-loose); color: var(--hive-color-muted); }
.legal-body p + p { margin-top: 12px; }
.legal-body ul { padding-left: 20px; display: grid; gap: 10px; margin: 0 0 12px; list-style: disc; }
.legal-body li::marker { color: var(--hive-legal-marker); }
.legal-body strong { color: var(--hive-legal-strong); font-weight: 500; }
.legal-body a { color: var(--hive-link-text); text-decoration: underline; text-underline-offset: 3px; }
.legal-updated { font-size: var(--hive-type-0); }
.legal-contents { margin: 32px 0 8px; padding: 20px 24px; border: 1px solid var(--hive-legal-contents-border); border-radius: var(--hive-radius-2xl); background: var(--hive-legal-contents-bg); }
.legal-contents ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; }
.legal-contents li { font-size: var(--hive-type-1); line-height: var(--hive-leading-loose); break-inside: avoid; }
@media (max-width: 700px) { .legal-contents ol { columns: 1; } }