/* The app's design system pieces the marketing pages share, taken from the seebee repo's base.css, components.css,
   cards.css and forms.css. Colours come only from tokens.css. Media queries stand in for the app's .sb-page
   container queries, since these pages have no app shell. */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sb-font-text);
  font-size: var(--sb-size-body);
  line-height: var(--sb-leading-body);
  color: var(--sb-text);
  background: var(--sb-surface);
}

h1, h2, h3, h4 { margin: 0; line-height: var(--sb-leading-heading); font-weight: var(--sb-weight-heavy); }
p, ul, ol, dl, figure, blockquote { margin: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

a { color: var(--sb-text); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--sb-text); }

:focus-visible {
  outline: var(--sb-focus-ring);
  outline-offset: var(--sb-focus-offset);
  box-shadow: var(--sb-focus-halo);
}
[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

.sb-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.sb-hand {
  font-family: var(--sb-font-hand);
  font-weight: var(--sb-weight-bold);
  font-variation-settings: var(--sb-hand-settings);
  font-variant-ligatures: no-common-ligatures;
}

.sb-skip-link {
  position: absolute;
  top: var(--sb-space-3);
  left: var(--sb-space-3);
  z-index: 50;
  padding: var(--sb-space-3) var(--sb-space-5);
  border-radius: var(--sb-radius-pill);
  background: var(--sb-surface-inverse);
  color: var(--sb-text-on-dark);
  font-weight: var(--sb-weight-heavy);
  transform: translateY(-200%);
}
.sb-skip-link:focus { transform: none; color: var(--sb-text-on-dark); }

/* Visitors who ask for reduced motion get stills. motion.js adds .motion-reduced for that setting and for the
   ?motion=reduce test switch, so both paths share one rule. */
@media (prefers-reduced-motion: reduce) {
  :root { --sb-duration-quick: 0ms; --sb-duration-tilt: 0ms; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.motion-reduced { --sb-duration-quick: 0ms; --sb-duration-tilt: 0ms; }
.motion-reduced *, .motion-reduced *::before, .motion-reduced *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* The pause button stops every CSS animation on the page; scripts listen for the same switch. */
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }

/* The lockup: the bee mark beside the wordmark in the classroom's hand. */
.sb-lockup { display: inline-flex; align-items: center; gap: var(--sb-space-2); color: var(--sb-text); text-decoration: none; border-radius: var(--sb-radius-small); }
.sb-lockup:hover { color: var(--sb-text); }
.sb-lockup__bee { width: 2.75rem; height: auto; }
.sb-lockup__word {
  font-family: var(--sb-font-hand);
  font-size: 1.75rem;
  font-weight: var(--sb-weight-heavy);
  font-variation-settings: var(--sb-hand-settings);
  line-height: 1;
}

.sb-icon { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Buttons */
.sb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sb-space-2);
  min-height: var(--sb-control);
  padding: var(--sb-space-2) var(--sb-space-6);
  border: 2px solid var(--sb-text);
  border-radius: var(--sb-radius-pill);
  background: var(--sb-surface);
  color: var(--sb-text);
  font-weight: var(--sb-weight-heavy);
  text-align: center;
  text-decoration: none;
}
.sb-button--primary {
  min-height: var(--sb-target-main);
  padding-inline: 1.75rem;
  border-color: transparent;
  background: var(--sb-accent);
}
.sb-button--inverse { border-color: transparent; background: var(--sb-surface-inverse); color: var(--sb-text-on-dark); }
.sb-button--inverse:hover { color: var(--sb-text-on-dark); }
.sb-button--small { min-height: var(--sb-target); padding-inline: 1.125rem; font-size: var(--sb-size-label); }
.sb-button--quiet {
  min-height: var(--sb-target);
  padding: var(--sb-space-1) 0.625rem;
  border-color: transparent;
  border-radius: var(--sb-radius-control);
  background: transparent;
  font-weight: var(--sb-weight-bold);
}
@media (hover: hover) { .sb-button--quiet:hover { background: var(--sb-wash); } }

/* Glass: only for what floats over the page. */
:where(.sb-glass) { position: relative; }
.sb-glass {
  border-color: transparent;
  background: var(--sb-glass-bar);
  -webkit-backdrop-filter: var(--sb-glass-filter);
  backdrop-filter: var(--sb-glass-filter);
  box-shadow: var(--sb-glass-rim);
}
.sb-glass--sheet { background: var(--sb-glass-sheet); }
.sb-glass__sheen { position: absolute; inset: 0; border-radius: inherit; background: var(--sb-glass-sheen); pointer-events: none; }
:where(.sb-glass > :not(.sb-glass__sheen)) { position: relative; }
.sb-glass:focus-visible { box-shadow: var(--sb-focus-halo), var(--sb-glass-rim); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .sb-glass { background: var(--sb-surface); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--sb-glass-solid-shadow); }
  .sb-glass__sheen { opacity: 0; }
}
@media (forced-colors: active) {
  .sb-glass { background: Canvas; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid CanvasText; }
  .sb-glass__sheen { display: none; }
}

/* The pause button every page carries. */
.sb-motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sb-space-2);
  min-height: var(--sb-target);
  padding: 0 var(--sb-space-4) 0 var(--sb-space-3);
  border-radius: var(--sb-radius-pill);
  font-size: var(--sb-size-label);
  font-weight: var(--sb-weight-heavy);
}
.sb-motion-toggle[hidden] { display: none; }

/* Badges */
.sb-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 2px var(--sb-space-3);
  border: 2px solid transparent;
  border-radius: var(--sb-radius-pill);
  font-size: var(--sb-size-meta);
  font-weight: var(--sb-weight-heavy);
}
.sb-badge .sb-icon { width: 16px; height: 16px; }
.sb-badge--draft { border: 2px dashed var(--sb-text); }
.sb-badge--alert { padding-left: var(--sb-space-2); background: var(--sb-danger); color: var(--sb-text-on-dark); }
.sb-badge--seen { padding-left: var(--sb-space-2); background: var(--sb-glow); }

/* The feed: glow band, paper, the dotted rail and shape-coded markers. */
.sb-feed__band { padding: 6.5rem var(--sb-space-6) var(--sb-space-10); background: var(--sb-glow); }
.sb-feed__day { font-size: var(--sb-size-display); line-height: 1; overflow-wrap: anywhere; }
.sb-feed__date { margin-top: 0.625rem; color: var(--sb-text-muted); font-size: var(--sb-size-label); font-weight: var(--sb-weight-medium); }
.sb-feed__paper {
  position: relative;
  margin-top: calc(-1 * var(--sb-space-7));
  padding: var(--sb-space-7) var(--sb-space-4) 0 0;
  border-radius: var(--sb-radius-paper) var(--sb-radius-paper) 0 0;
  background: var(--sb-surface);
}
.sb-rail { position: relative; }
.sb-rail::before {
  content: '';
  position: absolute;
  top: 0.875rem;
  bottom: 0;
  left: 1.5625rem;
  width: 6px;
  background-image: radial-gradient(circle, var(--sb-buttercup) 2.2px, var(--sb-clear) 2.8px);
  background-size: 6px 12px;
  background-repeat: repeat-y;
}
.sb-feed__cards { display: flex; flex-direction: column; gap: 2.75rem; padding: 0; list-style: none; }
.sb-feed__item { position: relative; padding-left: 3.5rem; }
.sb-card__marker { position: absolute; top: 3px; left: 1.125rem; width: 20px; height: 20px; }

/* A card is not a box: it sits straight on the paper. */
.sb-card { display: flex; flex-direction: column; gap: 0.875rem; min-width: 0; }
.sb-card__header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-2) 0.625rem; }
.sb-card__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sb-space-2) 0.625rem; font-size: var(--sb-size-label); }
.sb-card__name { font-size: var(--sb-size-name); line-height: var(--sb-leading-tight); overflow-wrap: anywhere; }
.sb-card__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--sb-radius-menu);
  box-shadow: var(--sb-shadow-photo);
  transform: perspective(900px) rotateX(var(--sb-tilt-x, 0deg)) rotateY(var(--sb-tilt-y, 0deg));
  transition: transform var(--sb-duration-tilt) var(--sb-ease);
}
.sb-card__image { width: 100%; height: auto; transition: transform var(--sb-duration-tilt) var(--sb-ease); }
.sb-card__glare {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--sb-glare-x, 50%) var(--sb-glare-y, 50%), var(--sb-glare), var(--sb-clear) 58%);
  transition: opacity var(--sb-duration-tilt) var(--sb-ease);
}
.sb-card__frame--tilting { transform: perspective(900px) rotateX(var(--sb-tilt-x, 0deg)) rotateY(var(--sb-tilt-y, 0deg)) scale(1.012); }
.sb-card__frame--tilting .sb-card__image { transform: translate(var(--sb-shift-x, 0), var(--sb-shift-y, 0)) scale(1.04); }
.sb-card__frame--tilting .sb-card__glare { opacity: 1; }
.sb-card__text { overflow-wrap: anywhere; }
.sb-card__fields { border-bottom: 1px solid var(--sb-divider); }
.sb-card__fields > div { display: flex; flex-direction: column; gap: var(--sb-space-1); padding: 0.625rem 0; border-top: 1px solid var(--sb-divider); }
.sb-card__fields dt { color: var(--sb-text-muted); font-size: var(--sb-size-label); font-weight: var(--sb-weight-bold); }
.sb-card__fields dd { margin: 0; overflow-wrap: anywhere; }
.sb-card__note { display: flex; flex-direction: column; gap: var(--sb-space-2); padding: 0.875rem var(--sb-space-4); border-radius: var(--sb-radius-box); background: var(--sb-glow); }
.sb-card__note-from { font-size: var(--sb-size-label); font-weight: var(--sb-weight-heavy); }
.sb-card__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-left: -0.625rem; }
.sb-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sb-space-2);
  min-height: var(--sb-target);
  padding: 0 0.625rem;
  border: 0;
  border-radius: var(--sb-radius-control);
  background: transparent;
  font-size: var(--sb-size-label);
  font-weight: var(--sb-weight-bold);
  text-decoration: none;
}
@media (hover: hover) { .sb-card__link:hover { background: var(--sb-wash); } }
.sb-card__buttons { display: flex; align-items: center; gap: 0.625rem; margin-left: auto; }
.sb-card__buttons .sb-button--primary { min-height: var(--sb-target); padding-inline: 1.125rem; font-size: var(--sb-size-label); box-shadow: var(--sb-shadow-lift); }
.sb-card__latest { color: var(--sb-text-muted); font-size: var(--sb-size-hint); overflow-wrap: anywhere; }
.sb-card__latest-by { display: block; color: var(--sb-text); font-weight: var(--sb-weight-bold); }

/* Forms */
.sb-field { display: flex; flex-direction: column; gap: var(--sb-space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.sb-field__label { padding: 0; font-size: var(--sb-size-label); font-weight: var(--sb-weight-heavy); }
.sb-field__hint { color: var(--sb-text-muted); font-size: var(--sb-size-hint); }
.sb-input {
  width: 100%;
  min-height: var(--sb-control);
  padding: 0 var(--sb-space-4);
  border: 2px solid var(--sb-field-border);
  border-radius: var(--sb-radius-field);
  background: var(--sb-surface);
}
.sb-textarea { min-height: 7rem; padding: var(--sb-space-3) var(--sb-space-4); resize: vertical; }
.sb-segmented { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--sb-space-1); padding: var(--sb-space-1); border: 2px solid var(--sb-text); border-radius: var(--sb-radius-tile); }
.sb-segmented__option { position: relative; display: flex; align-items: center; justify-content: center; min-height: 3rem; padding: var(--sb-space-1) var(--sb-space-3); border-radius: var(--sb-radius-item); font-weight: var(--sb-weight-heavy); text-align: center; cursor: pointer; }
.sb-segmented__option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: inherit; opacity: 0; cursor: pointer; }
.sb-segmented__option:has(input:checked) { background: var(--sb-surface-inverse); color: var(--sb-text-on-dark); }
.sb-segmented__option:has(input:focus-visible) { outline: var(--sb-focus-ring); outline-offset: var(--sb-focus-offset); box-shadow: var(--sb-focus-halo); }
@media (forced-colors: active) {
  .sb-segmented__option:has(input:checked) { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* The sign-up form's trap for bots: off screen, out of the tab order, skipped by autofill. */
.sb-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* The note under the sign-up form: the thanks, or why it did not go. */
.sb-form-note { display: flex; align-items: center; gap: var(--sb-space-2); padding: var(--sb-space-3) var(--sb-space-5); border-radius: var(--sb-radius-menu); background: var(--sb-surface-inverse); color: var(--sb-text-on-dark); font-weight: var(--sb-weight-bold); }
.sb-form-note[hidden] { display: none; }
.sb-form-note .sb-icon { color: var(--sb-buttercup); }

/* The bee celebration plays on one canvas over the page. */
.sb-celebrate { position: fixed; inset: 0; z-index: 40; width: 100%; height: 100%; pointer-events: none; }

@media (min-width: 62.5rem) {
  .sb-feed__day { font-size: var(--sb-size-display-wide); }
  .sb-card__frame { border-radius: var(--sb-radius-bar); }
}