@font-face { font-family: "Caveat"; src: url("../fonts/caveat-variable.9b4d0e504026.woff2") format("woff2"); font-style: normal; font-weight: 400 700; font-display: swap; }
/* Public brand layer. Deliberately separate from staff and customer workspaces. */
.public-site {
  --cream: #f6f0e5;
  --paper: #fffaf1;
  --ink: #24211e;
  --red: #b92b32;
  --red-dark: #962029;
  --muted: #6c6258;
  --public-gutter: clamp(1rem, 2.5vw, 2.5rem);
  --page: calc(100% - 2 * var(--public-gutter));
  --public-media-radius: 1.5rem;
  background: var(--cream);
  font-size: 1rem;
  line-height: 1.55;
}
.public-site [hidden] { display: none !important; }
.public-site .site-header { background: #f6f0e5f2; border-bottom: 1px solid var(--line); padding-inline: var(--public-gutter); }
.public-site .brand__mark { border: 0; }
.public-site .brand__descriptor { letter-spacing: .06em; font-size: .75rem; }
.public-site .site-nav__link { font-size: .9rem; font-weight: 650; }
.public-site .site-nav__link[aria-current="page"] { color: var(--red); }
.public-site .site-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.public-mobile-link { display: none; }
.public-site .site-audience-switch { font-size: .78rem; font-weight: 600; white-space: nowrap; }
.public-site .site-audience-switch:hover { color: var(--red); }
.public-site.public-business .brand__descriptor { color: var(--red-dark); letter-spacing: .14em; }
.public-site.public-shell h2, .public-site.public-shell h3 { font-family: var(--display); }
@media (min-width: 80rem) { .public-shell .desk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 72rem) {
  .public-site .site-audience-switch { display: none; }
  .public-site .site-nav .site-nav__switch { border-top: 1px solid var(--line); margin-top: .65rem; padding-top: 1.25rem; font-size: 1rem; color: var(--red-dark); }
}
.public-site .button { min-height: 3.2rem; font-weight: 650; padding: 1rem 1.45rem; }
.public-site .button--small { min-height: 2.8rem; padding: .8rem 1.2rem; }
.public-site .button:hover { box-shadow: 0 .35rem 0 #24211e20; }
.public-site .eyebrow { font-size: .8rem; line-height: 1.5; font-weight: 650; letter-spacing: .06em; }
.public-site .text-link { font-weight: 600; }
.public-site .fox-text-button { padding: 0; border: 0; border-bottom: 1px solid currentColor; background: none; cursor: pointer; color: var(--ink); }
.public-site .choice-guide__heading > button { margin-top: 1.5rem; }
.public-site h1, .public-site h2 { text-transform: none; text-wrap: balance; }
.public-site h1 { letter-spacing: -.055em; line-height: 1.03; }
.public-site h2 { letter-spacing: -.04em; line-height: 1.08; }
.public-site h1 em, .public-site h2 em { font-family: Georgia, serif; font-weight: 400; font-style: italic; line-height: 1.1; }
.public-site p { text-wrap: pretty; }
.public-site :focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.fox-home-hero { width: var(--page); display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; gap: 2rem; margin: auto; padding: 4rem 0 3rem; }
.fox-home-hero__copy { min-width: 0; position: relative; z-index: 1; }
.fox-home-hero h1 { font-family: var(--display); font-size: clamp(3.25rem, 5.8vw, 6.5rem); margin: 1rem 0 1.5rem; font-weight: 800; }
.fox-home-hero h1 em { color: var(--red); white-space: nowrap; }
.fox-home-hero__copy > p:not(.eyebrow) { max-width: 29rem; color: var(--muted); font-size: 1.1rem; line-height: 1.65; }
.fox-home-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; margin-top: 2rem; }
.fox-home-hero__note { display: flex; align-items: center; gap: .75rem; margin-top: 2.4rem; font-size: .875rem; color: var(--muted); }
.fox-home-hero__note::before { content: ''; width: 2rem; height: 1px; background: currentColor; }
.fox-stage { container: fox-stage / inline-size; position: relative; min-width: 0; min-height: 33rem; padding-bottom: 4.75rem; display: grid; place-items: center; margin: 0; isolation: isolate; }
.fox-stage::before { content: ''; position: absolute; inset: 0 0 4.75rem; border-radius: var(--public-media-radius); background: #ebdbaa; z-index: -1; }
.fox-stage__art { border: 0; background: none; width: 100%; padding: 0; cursor: pointer; }
.fox-stage__art img { width: 100%; height: 33rem; object-fit: contain; transition: transform .3s ease; filter: drop-shadow(0 1rem .4rem #675a3820); }
.fox-stage__art:enabled:hover img { transform: rotate(-3deg) translateY(-.5rem); }
.fox-stage__stamp { position: absolute; top: 1.25rem; left: 1.25rem; display: grid; justify-items: center; gap: .45rem; width: max-content; padding: .8rem 1rem .9rem; border: 1px solid #b92b3270; border-radius: .8rem; background: var(--paper); color: var(--red-dark); text-align: center; transform: rotate(-5deg); box-shadow: 2px 3px 0 #96202912; pointer-events: none; }
.fox-stage__stamp::after { content: ''; position: absolute; inset: 4px; border: 1px solid #b92b322b; border-radius: .55rem; pointer-events: none; }
.fox-stage__stamp b { font-family: "Caveat", "Segoe Print", cursive; font-size: 1.85rem; font-weight: 600; line-height: 1; white-space: nowrap; }
.fox-stage__stamp > span { padding-top: .4rem; border-top: 1px solid #b92b3240; font-family: var(--body); font-size: .62rem; font-weight: 650; line-height: 1.2; letter-spacing: .11em; text-transform: uppercase; white-space: nowrap; }
.public-site .pencil-caption { display: flex; align-items: center; gap: .65rem; max-width: calc(100% - 2rem); padding: 0; border: 0; background: none; color: #625548; font-family: "Caveat", "Segoe Print", cursive; font-size: 1.8rem; font-weight: 500; line-height: 1.05; transform: rotate(-3deg); pointer-events: none; }
.fox-stage figcaption { position: absolute; bottom: .2rem; right: 1.25rem; margin: 0; }
.pencil-caption__note { display: block; min-width: 0; }
.pencil-caption__note > span { display: block; margin-top: .2rem; font-size: 1.45rem; font-weight: 400; }
.pencil-caption__arrow { flex: 0 0 3.5rem; width: 3.5rem; height: 3.75rem; align-self: flex-start; margin-top: -.6rem; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.public-site .main-rail, .public-site .ticker { background: var(--red); color: var(--paper); transform: none; margin: 0; border: 0; padding-block: 1rem; }
.public-site .main-rail__track, .public-site .ticker__track { font-size: 1rem; letter-spacing: .08em; }
.public-site .main-rail__track { --rail-gap: 2.5rem; }
.public-site .ticker__track { --ticker-gap: 2.5rem; }
.public-site .main-rail i, .public-site .ticker i { color: #e6c27c; }
.public-site .main-menu-story { gap: 4rem; padding-block: 5rem; }
.public-site .main-menu-story h2, .public-site .main-about h2, .public-site .main-business-story h2, .public-site .main-contact h2 { font-size: clamp(2.5rem,4vw,4.5rem); }
.public-site .main-menu-story__tastes { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.public-site .main-menu-story__tastes small { text-transform: none; font-weight: 750; }
.public-site .main-menu-story__tastes a { border-radius: 0; background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 1.4rem 1rem; }
.public-site .main-menu-story__tastes a:hover, .public-site .main-menu-story__tastes a:focus-visible { background: var(--paper); color: var(--ink); transform: translateX(.25rem); }
.public-site .main-menu-story__tastes a:hover strong, .public-site .main-menu-story__tastes a:focus-visible strong { color: var(--muted); }
.public-site .main-proof__grid article { background: transparent; }
.coffee-pause { width: var(--page); margin: 0 auto 5rem; display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; border-radius: 1.5rem; overflow: hidden; background: #e9deca; }
.coffee-pause > img { height: 31rem; width: 100%; object-fit: cover; }
.coffee-pause > div { display: flex; flex-direction: column; justify-content: center; align-items: start; padding: 3rem; }
.coffee-pause h2 { font-size: clamp(2.5rem,4vw,4rem); margin: .5rem 0 1rem; }
.coffee-pause p:not(.eyebrow) { color: var(--muted); max-width: 29rem; }
.coffee-pause button { margin-top: 1rem; }
.public-site .main-about, .public-site .main-business-story { border-radius: 0; }
.public-site .main-about h2 em, .public-site .main-business-story h2 em { color: #f1c78b; }
.public-site .main-proof__grid strong { font-size: clamp(1.2rem,1.8vw,1.8rem); text-transform: none; line-height: 1.25; }
.public-site .hero { padding-block: 4rem; gap: 3rem; }
.public-site .hero h1 { font-size: clamp(3rem,4.7vw,5.5rem); }
.public-site .hero__visual { border-radius: var(--public-media-radius); box-shadow: none; min-height: 34rem; }
.public-site .hero__orbit { display: none; }
.public-site .hero__facts dt { margin-bottom: .7rem; }
.public-site .section-heading h2, .public-site .calculator-intro h2 { font-size: clamp(2.5rem,4vw,4.5rem); }
.public-site .system-card { border-radius: 1rem; }
.public-site .system-card h3 { text-transform: none; }
.public-site .calculator-story .editorial-equipment { width: 100%; height: 17rem; object-fit: cover; border-radius: .75rem; margin: 1.5rem 0; }
.fox-inline { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; margin: 2rem 0; background: #efe3c6; border: 1px solid #dbc7a5; border-radius: .75rem; color: var(--ink); }
.fox-inline img { width: 5rem; height: 5rem; object-fit: contain; flex-shrink: 0; }
.fox-inline p { margin: 0 0 .4rem; font-size: .95rem; }
.fox-inline button { border: 0; border-bottom: 1px solid currentColor; padding: 0; background: none; color: var(--red-dark); cursor: pointer; text-align: left; font-size: .875rem; }
.public-site .menu-section { padding-top: 2.25rem; }
@media(max-width:48rem) { .public-site .menu-section { padding-top: 1.5rem; } }
.public-site .menu-filters { border-radius: 1rem; }
.public-site .product-grid .product-card { transition: transform .2s,box-shadow .2s; }
.public-site .product-card h3 { text-transform: none; }
.public-site .shop-shell { width: 100%; max-width: none; padding-inline: var(--public-gutter); }
@media (min-width: 76rem) { .public-site .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 112rem) { .public-site .shop-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.public-site .main-business-story,
.public-site .main-about,
.public-site .manifesto { padding-inline: var(--public-gutter); }
.public-site .beans-banner { border-radius: 0; }
.public-site .business-wrap { max-width: none; width: var(--page); }
.public-site .business-page-title { max-width: 65rem; margin-top: 0; }
.public-site .business-page-title h1 { font-size: clamp(2.75rem,5.7vw,5.5rem); }
.public-site .calculator-page .business-page-title h1 { font-size: clamp(2.5rem,4vw,4rem); }
.public-site .calculator-page .business-page-title { margin-bottom: 2.25rem; }
.public-site .calculator-layout { grid-template-columns: minmax(18rem,.85fr) minmax(0,1.15fr); }
.public-site .calculator-story { background: #eee3cb; color: var(--ink); }
.public-site .calculator-story p, .public-site .calculator-story > span { color: var(--muted); }
.public-site .commerce-empty { background: #ede3cf; padding: 2rem; }
.public-site .product-copy p { font-size: 1rem; }
.public-site .desk-muted, .public-site .product-price span { font-size: .875rem; }
.public-site .about-hero { max-width: none; margin: auto; padding: 4rem var(--public-gutter); gap: 4rem; }
.public-site .about-hero h1 { font-size: clamp(3rem,5.8vw,6rem); }
.public-site .about-hero figure { transform: none; }
.public-site .about-hero img { height: 36rem; border-radius: var(--public-media-radius); }
.public-site .about-hero figcaption { position: relative; inset: auto; width: fit-content; margin: 1.25rem 1.25rem 0 auto; }
.public-site .about-principles { background: var(--red); }
.public-site .about-principles p { color: #fff1df; font-size: 1rem; }
.public-site .about-contact { background: #ece1cc; padding-inline: var(--public-gutter); }
.public-site .about-contact .desk-form { padding: 2rem; border: 1px solid var(--line); box-shadow: 0 .7rem 0 #24211e08; }
.public-site .desk-form input:not([type=checkbox]):focus, .public-site .desk-form textarea:focus, .public-site .desk-form select:focus { border-color: var(--red); box-shadow: 0 0 0 2px #b92b321a; }
.public-site .demo-topline { background: #eddfba; padding: .8rem var(--public-gutter); }
.public-site .demo-sidebar { background: transparent; }
.public-site .demo-content .partner-welcome { background: #ece1c9; border-radius: 1.25rem; }
.public-site .demo-content .partner-membership { background: var(--red); }
.public-site .demo-stats > a { transition: background .2s; }
.public-site .demo-stats > a:hover { background: #eee1c5; }
.public-site .legal-page { padding-top: 3rem; min-height: 50vh; }
.public-site .legal-page h1 { text-transform: none; font-size: clamp(2.5rem,5vw,4.5rem); line-height: 1.1; }
.public-site .legal-page article { background: var(--paper); padding: 2.5rem; border: 1px solid var(--line); border-radius: 1rem; margin-top: 2.5rem; }
.fox-footer { background: #ad2730; color: #fff8e8; padding: 3rem var(--public-gutter) max(2rem,env(safe-area-inset-bottom)); }
.fox-footer__top { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid #fff8e844; }
.fox-footer__top p { margin: 0 0 .5rem; color: #f1cabd; font-size: .875rem; }
.fox-footer__hello { font-family: Georgia,serif; font-size: clamp(1.8rem,3.5vw,3.6rem); font-style: italic; line-height: 1.2; }
.fox-footer__hello span { display: inline-block; transition: transform .2s; }
.fox-footer__hello:hover span { transform: translate(.25rem,-.25rem); }
.fox-footer__call { padding: 1rem 1.25rem; border: 1px solid #fff8e866; border-radius: 2rem; background: none; color: inherit; cursor: pointer; font-size: .875rem; white-space: nowrap; }
.fox-footer__middle { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; align-items: start; padding: 3.5rem 0; }
.fox-footer__wordmark { font-size: clamp(4rem,8vw,8rem); font-weight: 850; line-height: .85; letter-spacing: -.07em; }
.fox-footer__wordmark span { display: block; font-size: .75rem; letter-spacing: .1em; line-height: 1.5; margin-top: 1.5rem; font-weight: 500; }
.fox-footer nav, .fox-footer__contacts { display: grid; gap: .65rem; font-size: 1rem; }
.fox-footer__contacts > span { color: #f1cabd; font-size: .9rem; }
.fox-footer a:hover { text-decoration: underline; text-underline-offset: .3em; }
.fox-footer__wordmark:hover { text-decoration: none !important; }
.fox-footer__bottom { display: flex; gap: 1rem 2rem; flex-wrap: wrap; padding: 1.5rem 8rem 1rem 0; border-top: 1px solid #fff8e844; font-size: .8rem; }
.fox-footer__bottom > span { margin-right: auto; }
@media(max-width:72rem) {
  .public-mobile-link { display: block; }
  .public-site .site-nav { max-height: calc(100dvh - 5.5rem); overflow-y: auto; padding-inline: var(--public-gutter); }
  .public-site .site-nav__link { font-size: 1.5rem; padding: .7rem 0; }
  .fox-home-hero { grid-template-columns: 1.1fr 1fr; gap: 1rem; }
  .fox-home-hero h1 { font-size: clamp(2.8rem,5.8vw,5rem); }
  .fox-stage { min-height: 27rem; }
  .fox-stage__art img { height: 27rem; }
  .fox-stage__stamp { top: 1rem; left: 1rem; padding: .75rem .85rem .8rem; }
  .fox-stage__stamp b { font-size: 1.65rem; }
  .public-site .hero__visual { min-height: 28rem; }
  .public-site .about-hero { gap: 2.5rem; }
  .public-site .about-hero img { height: 30rem; }
  .coffee-pause > div { padding: 2rem; }
  .fox-footer__middle { gap: 2rem; }
}
@media(max-width:55rem) {
  .fox-home-hero { grid-template-columns: 1fr; padding: 2.5rem 0 2rem; gap: 1rem; }
  .fox-home-hero h1 { font-size: clamp(3.1rem,8.6vw,5rem); max-width: 14ch; }
  .fox-home-hero__copy > p:not(.eyebrow) { max-width: 34rem; }
  .fox-home-hero__note { margin-top: 1.5rem; }
  .fox-stage { width: min(30rem,100%); margin: auto; min-height: 25rem; }
  .fox-stage__art img { height: 25rem; }
  .fox-stage__stamp { top: 1rem; left: 1rem; }
  .public-site .main-menu-story { gap: 2rem; padding-block: 3.5rem; }
  .coffee-pause { grid-template-columns: 1fr; margin-bottom: 3rem; }
  .coffee-pause > img { height: 22rem; }
  .public-site .hero { padding: 2.5rem 0; gap: 2rem; }
  .public-site .about-hero { padding: 2.5rem var(--public-gutter) 3rem; gap: 2rem; }
  .public-site .about-hero img { height: 27rem; }
  .public-site .calculator-layout { grid-template-columns: 1fr; }
  .public-site .business-wrap { padding-top: 2.5rem; }
  .public-site .business-page-title h1 { font-size: clamp(2.75rem,7vw,4.5rem); }
  .public-site .demo-sidebar nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .4rem; }
  .public-site .demo-sidebar nav a { white-space: nowrap; }
  .public-site .demo-sidebar { min-width: 0; }
  .fox-footer__middle { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .fox-footer__wordmark { grid-column: 1/-1; font-size: clamp(5rem,16vw,8rem); }
  .fox-footer__top { align-items: start; flex-direction: column; gap: 1.5rem; }
  .fox-footer__bottom { padding-right: 0; padding-bottom: 4rem; }
}
@media(max-width:30rem) {
  .fox-home-hero h1 { font-size: clamp(2.65rem,10vw,3.4rem); }
  .fox-home-hero h1 em { white-space: normal; }
  .fox-home-hero__actions { gap: 1rem; }
  .fox-stage { min-height: 23rem; }
  .fox-stage__art img { height: 23rem; }
  .public-site .pencil-caption { font-size: 1.6rem; gap: .4rem; }
  .fox-stage figcaption { right: .75rem; }
  .public-site .about-hero figcaption { margin-right: .75rem; }
  .pencil-caption__note > span { font-size: 1.3rem; }
  .public-site .about-contact .desk-form { padding: 1.25rem; }
  .public-site .legal-page article { padding: 1.25rem; }
  .fox-inline { padding: 1rem; gap: .75rem; }
  .fox-inline img { width: 3.5rem; height: 4rem; }
  .fox-footer__bottom > span { flex-basis: 100%; }
}

.fox-stage__art:disabled { cursor: default; opacity: 1; }

/* The sticker follows the illustration width, including the narrow two-column layout. */
@container fox-stage (max-width:25rem) {
  .fox-stage__stamp { left: .75rem; right: auto; top: .85rem; padding: .65rem .7rem .75rem; transform: rotate(-5deg); }
  .fox-stage__stamp b { font-size: 1.4rem; }
}
@container fox-stage (max-width:22rem) {
  .fox-stage__art { padding-top: 3rem; }
}

/* Original vector sign, shared with the brand kit. */
.fox-footer__mark { display:block; width:72px; height:72px; object-fit:contain; margin-bottom:24px; }