/* ============================================================================
   PicVerto / Vembre Interactive — Material 3 Expressive design system
   ----------------------------------------------------------------------------
   Single stylesheet shared by every page on the site. Do not duplicate these
   tokens into a page's <style> block; extend here instead.

   Colour roles are generated from the app's own Notebook theme seeds
   (lib/theme/themes.dart:10-23) using the M3 tonal method — tone = CIELAB L*,
   seed hue and chroma held constant, chroma reduced where a tone falls outside
   sRGB. Every foreground/background pair used on this site was checked against
   WCAG: no pair falls below 4.5:1 for text or 3:1 for outlines, in either
   scheme.

   Motion mirrors lib/theme/expressive_shapes.dart (ExpressiveMotion): spatial
   springs may overshoot, effects easings never do.
   ========================================================================= */

/* ── Colour: light ─────────────────────────────────────────────────────── */
:root {
  --md-sys-color-primary: #954924;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #FFDBCB;
  --md-sys-color-on-primary-container: #301400;
  --md-sys-color-secondary: #27695D;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #ADEFE1;
  --md-sys-color-on-secondary-container: #00201B;
  --md-sys-color-tertiary: #7D5629;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #FFDCBB;
  --md-sys-color-on-tertiary-container: #291800;
  --md-sys-color-error: #BA1920;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #FFDAD4;
  --md-sys-color-on-error-container: #3B0900;
  --md-sys-color-background: #FEF9EC;
  --md-sys-color-on-background: #1E1B12;
  --md-sys-color-surface: #FEF9EC;
  --md-sys-color-on-surface: #1E1B12;
  --md-sys-color-surface-variant: #EBE2C8;
  --md-sys-color-on-surface-variant: #4D4631;
  --md-sys-color-surface-dim: #DFDACD;
  --md-sys-color-surface-bright: #FEF9EC;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F8F3E6;
  --md-sys-color-surface-container: #F3EEE0;
  --md-sys-color-surface-container-high: #EDE8DB;
  --md-sys-color-surface-container-highest: #E7E2D5;
  --md-sys-color-outline: #7E775F;
  --md-sys-color-outline-variant: #CFC6AC;
  --md-sys-color-inverse-surface: #343026;
  --md-sys-color-inverse-on-surface: #F5F0E3;
  --md-sys-color-inverse-primary: #FFB694;
  --md-sys-color-surface-tint: #954924;
  --md-sys-color-shadow: #000000;

  /* Exact app brand leather (lib/theme/themes.dart:12). Decorative only —
     role tokens above stay spec-correct; this keeps the site tied to the
     app icon. */
  --brand-leather: #A0522D;
  --brand-teal: #2A6B5F;

  /* Per-tool accents, true seed hues from lib/theme/tool_accents.dart.
     Hue harmonization is deliberately NOT applied: in the app it is
     tablet-only (tool_accents.dart:114), so phone users see these hues. */
  --acc-compress-c: #CAEFC5;  --acc-compress-i: #12681E;
  --acc-editor-c:   #FFDFD1;  --acc-editor-i:   #8F4420;
  --acc-idphoto-c:  #E6E2FF;  --acc-idphoto-i:  #4250B3;
  --acc-blur-c:     #FFDFCE;  --acc-blur-i:     #954000;
  --acc-pdf-c:      #FFDED8;  --acc-pdf-i:      #B40F1B;
  --acc-scanner-c:  #DEE4FF;  --acc-scanner-i:  #0059AD;
  --acc-sign-c:     #E5E5E5;  --acc-sign-i:     #595959;
  --acc-crop-c:     #A9F4E5;  --acc-crop-i:     #006559;

  color-scheme: light;
}

/* ── Colour: dark ──────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary: #FFB694;
    --md-sys-color-on-primary: #571F00;
    --md-sys-color-primary-container: #78310E;
    --md-sys-color-on-primary-container: #FFDBCB;
    --md-sys-color-secondary: #91D3C5;
    --md-sys-color-on-secondary: #00382F;
    --md-sys-color-secondary-container: #065045;
    --md-sys-color-on-secondary-container: #ADEFE1;
    --md-sys-color-tertiary: #EEBD8B;
    --md-sys-color-on-tertiary: #472A00;
    --md-sys-color-tertiary-container: #623F13;
    --md-sys-color-on-tertiary-container: #FFDCBB;
    --md-sys-color-error: #FFB4A8;
    --md-sys-color-on-error: #690006;
    --md-sys-color-error-container: #930012;
    --md-sys-color-on-error-container: #FFDAD4;
    --md-sys-color-background: #171305;
    --md-sys-color-on-background: #E7E2D5;
    --md-sys-color-surface: #171305;
    --md-sys-color-on-surface: #E7E2D5;
    --md-sys-color-surface-variant: #4D4631;
    --md-sys-color-on-surface-variant: #CFC6AC;
    --md-sys-color-surface-dim: #171305;
    --md-sys-color-surface-bright: #3C392F;
    --md-sys-color-surface-container-lowest: #120E00;
    --md-sys-color-surface-container-low: #1E1B12;
    --md-sys-color-surface-container: #221F16;
    --md-sys-color-surface-container-high: #2D2A20;
    --md-sys-color-surface-container-highest: #38352A;
    --md-sys-color-outline: #989078;
    --md-sys-color-outline-variant: #4D4631;
    --md-sys-color-inverse-surface: #E7E2D5;
    --md-sys-color-inverse-on-surface: #343026;
    --md-sys-color-inverse-primary: #954924;
    --md-sys-color-surface-tint: #FFB694;

    --brand-leather: #FFB694;
    --brand-teal: #91D3C5;

    --acc-compress-c: #244A23;  --acc-compress-i: #A8D9A2;
    --acc-editor-c:   #65351F;  --acc-editor-i:   #FFBDA0;
    --acc-idphoto-c:  #3D3D6C;  --acc-idphoto-i:  #CBC6FF;
    --acc-blur-c:     #63371C;  --acc-blur-i:     #FFBE98;
    --acc-pdf-c:      #6A312A;  --acc-pdf-i:      #FFBCB1;
    --acc-scanner-c:  #2A416F;  --acc-scanner-i:  #BBCBFF;
    --acc-sign-c:     #424242;  --acc-sign-i:     #CCCCCC;
    --acc-crop-c:     #004B42;  --acc-crop-i:     #7EDDCC;

    color-scheme: dark;
  }
}

/* ── Shape, elevation, motion, state ───────────────────────────────────── */
:root {
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-large-increased: 20px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-extra-large-increased: 32px;
  --md-sys-shape-corner-full: 9999px;

  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0 1px 2px 0 rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --md-sys-elevation-2: 0 1px 2px 0 rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --md-sys-elevation-3: 0 1px 3px 0 rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15);
  --md-sys-elevation-4: 0 2px 3px 0 rgba(0,0,0,.30), 0 6px 10px 4px rgba(0,0,0,.15);
  --md-sys-elevation-5: 0 4px 4px 0 rgba(0,0,0,.30), 0 8px 12px 6px rgba(0,0,0,.15);

  /* Spatial springs may overshoot (size/position/shape).
     Effects easings never do (colour/opacity) — see ExpressiveMotion. */
  --md-sys-motion-spatial-fast:    350ms cubic-bezier(.42, 1.67, .21, .90);
  --md-sys-motion-spatial-default: 500ms cubic-bezier(.38, 1.21, .22, 1.00);
  --md-sys-motion-spatial-slow:    650ms cubic-bezier(.39, 1.29, .35, .98);
  --md-sys-motion-effects-fast:    150ms cubic-bezier(.31, .94, .34, 1.00);
  --md-sys-motion-effects-default: 200ms cubic-bezier(.20, 0, 0, 1.00);
  --md-sys-motion-effects-slow:    300ms cubic-bezier(.20, 0, 0, 1.00);

  --md-sys-state-hover: .08;
  --md-sys-state-focus: .12;
  --md-sys-state-pressed: .12;

  --md-ref-typeface-brand: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --md-ref-typeface-plain: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --page-max: 1080px;
  --page-pad: 24px;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
html, body { overflow-x: clip; }

body {
  font-family: var(--md-ref-typeface-plain);
  background: var(--md-sys-color-background);
  color: var(--md-sys-color-on-surface);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: .5px;               /* body-large */
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

::selection {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

img { max-width: 100%; display: block; }

/* Focus: 3px ring + 12% state layer, :focus-visible only (WCAG 2.2 SC 2.4.13) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
  border-radius: var(--md-sys-shape-corner-small);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Type scale ────────────────────────────────────────────────────────── */
.md-display-large   { font: 400 57px/64px var(--md-ref-typeface-brand); letter-spacing: -.25px; }
.md-display-medium  { font: 400 45px/52px var(--md-ref-typeface-brand); letter-spacing: 0; }
.md-display-small   { font: 400 36px/44px var(--md-ref-typeface-brand); letter-spacing: 0; }
.md-headline-large  { font: 400 32px/40px var(--md-ref-typeface-brand); letter-spacing: 0; }
.md-headline-medium { font: 400 28px/36px var(--md-ref-typeface-brand); letter-spacing: 0; }
.md-headline-small  { font: 400 24px/32px var(--md-ref-typeface-brand); letter-spacing: 0; }
.md-title-large     { font: 400 22px/28px var(--md-ref-typeface-brand); letter-spacing: 0; }
.md-title-medium    { font: 500 16px/24px var(--md-ref-typeface-plain); letter-spacing: .15px; }
.md-title-small     { font: 500 14px/20px var(--md-ref-typeface-plain); letter-spacing: .1px; }
.md-body-large      { font: 400 16px/24px var(--md-ref-typeface-plain); letter-spacing: .5px; }
.md-body-medium     { font: 400 14px/20px var(--md-ref-typeface-plain); letter-spacing: .25px; }
.md-body-small      { font: 400 12px/16px var(--md-ref-typeface-plain); letter-spacing: .4px; }
.md-label-large     { font: 500 14px/20px var(--md-ref-typeface-plain); letter-spacing: .1px; }
.md-label-medium    { font: 500 12px/16px var(--md-ref-typeface-plain); letter-spacing: .5px; }
.md-label-small     { font: 500 11px/16px var(--md-ref-typeface-plain); letter-spacing: .5px; }

/* Expressive "emphasized" set: one weight step up, metrics unchanged. */
.md-emphasized.md-display-large,
.md-emphasized.md-display-medium,
.md-emphasized.md-display-small,
.md-emphasized.md-headline-large,
.md-emphasized.md-headline-medium,
.md-emphasized.md-headline-small,
.md-emphasized.md-title-large   { font-weight: 700; }
.md-emphasized.md-label-large,
.md-emphasized.md-label-medium,
.md-emphasized.md-label-small,
.md-emphasized.md-title-medium,
.md-emphasized.md-title-small   { font-weight: 700; }

/* ── Layout ────────────────────────────────────────────────────────────── */
.container { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-pad); }

.section { padding: 72px 0; }
.section + .section { padding-top: 0; }

.section-overline {
  font: 500 12px/16px var(--md-ref-typeface-plain);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--md-sys-color-secondary);
  margin-bottom: 12px;
}

.section-title {
  font: 700 clamp(28px, 4.2vw, 36px)/1.2 var(--md-ref-typeface-brand);
  letter-spacing: -.2px;
  color: var(--md-sys-color-on-surface);
}

.section-sub {
  margin-top: 12px;
  max-width: 62ch;
  color: var(--md-sys-color-on-surface-variant);
  font: 400 16px/24px var(--md-ref-typeface-plain);
  letter-spacing: .5px;
}

/* ── State layer ───────────────────────────────────────────────────────── */
.md-state { position: relative; isolation: isolate; }
.md-state::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--md-sys-motion-effects-fast);
  z-index: 1;
}
.md-state:hover::after   { opacity: var(--md-sys-state-hover); }
.md-state:focus-visible::after { opacity: var(--md-sys-state-focus); }
.md-state:active::after  { opacity: var(--md-sys-state-pressed); }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  --btn-h: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-h);
  padding: 0 24px;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  font: 500 14px/20px var(--md-ref-typeface-plain);
  letter-spacing: .1px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    box-shadow var(--md-sys-motion-effects-default),
    border-radius var(--md-sys-motion-spatial-default),
    transform var(--md-sys-motion-spatial-default);
}
/* Expressive size scale */
.btn-l  { --btn-h: 48px; padding: 0 32px; font-size: 16px; }
.btn-xl { --btn-h: 56px; padding: 0 40px; font-size: 18px; line-height: 24px;
          border-radius: var(--md-sys-shape-corner-extra-large-increased); }

.btn svg { width: 18px; height: 18px; flex: none; }
.btn-xl svg { width: 22px; height: 22px; }

.btn-filled   { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.btn-filled:hover  { box-shadow: var(--md-sys-elevation-1); }
.btn-tonal    { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.btn-tonal:hover   { box-shadow: var(--md-sys-elevation-1); }
.btn-outlined { background: transparent; color: var(--md-sys-color-primary);
                box-shadow: inset 0 0 0 1px var(--md-sys-color-outline); }
.btn-text     { background: transparent; color: var(--md-sys-color-primary); padding: 0 12px; }

/* Expressive shape morph: the pill squares off slightly on press. */
.btn:active { border-radius: var(--md-sys-shape-corner-large-increased); }

/* ── Chips (assist, flat) ──────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--md-sys-shape-corner-small);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
  background: transparent;
  font: 500 14px/20px var(--md-ref-typeface-plain);
  letter-spacing: .1px;
  white-space: nowrap;
}
.chip-accent {
  box-shadow: none;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Top app bar (small, 64px, elevates on scroll) ─────────────────────── */
.appbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--md-sys-color-surface);
  transition: background var(--md-sys-motion-effects-default),
              box-shadow var(--md-sys-motion-effects-default);
}
.appbar[data-scrolled="true"] {
  background: var(--md-sys-color-surface-container);
  box-shadow: var(--md-sys-elevation-2);
}
.appbar-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.appbar-brand {
  display: inline-flex;
  align-items: center;
  min-height: 48px;                    /* 48px touch target */
  gap: 10px;
  font: 700 20px/28px var(--md-ref-typeface-brand);
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
}
.appbar-brand img { width: 28px; height: 28px; border-radius: 8px; }
.appbar-brand .accent { color: var(--md-sys-color-secondary); }

.appbar-nav { display: flex; align-items: center; gap: 4px; }
.appbar-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: none;
  font: 500 14px/20px var(--md-ref-typeface-plain);
  letter-spacing: .1px;
}
@media (max-width: 720px) { .appbar-nav .hide-sm { display: none; } }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: 64px 0 56px; text-align: center; }
.hero::before {
  content: "";
  position: absolute;
  inset: -160px 0 auto;
  height: 520px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(620px 300px at 28% 4%, color-mix(in srgb, var(--brand-leather) 20%, transparent), transparent 70%),
    radial-gradient(620px 300px at 74% 14%, color-mix(in srgb, var(--brand-teal) 16%, transparent), transparent 70%);
}
.hero-icon {
  width: 96px; height: 96px; margin: 0 auto 24px;
  border-radius: var(--md-sys-shape-corner-extra-large-increased);
  box-shadow: var(--md-sys-elevation-3);
  transition: border-radius var(--md-sys-motion-spatial-slow);
}
.hero-icon:hover { border-radius: var(--md-sys-shape-corner-full); }

.hero h1 {
  font: 700 clamp(36px, 6.4vw, 57px)/1.08 var(--md-ref-typeface-brand);
  letter-spacing: -.5px;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--brand-leather), var(--brand-teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  margin: 20px auto 0;
  max-width: 60ch;
  color: var(--md-sys-color-on-surface-variant);
  font: 400 18px/28px var(--md-ref-typeface-plain);
  letter-spacing: .3px;
}
.cta-row {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-note {
  margin-top: 20px;
  color: var(--md-sys-color-on-surface-variant);
  font: 400 14px/20px var(--md-ref-typeface-plain);
  letter-spacing: .25px;
}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card {
  border-radius: var(--md-sys-shape-corner-extra-large);
  transition:
    box-shadow var(--md-sys-motion-effects-default),
    border-radius var(--md-sys-motion-spatial-default),
    transform var(--md-sys-motion-spatial-default);
}
.card-filled   { background: var(--md-sys-color-surface-container-highest); }
.card-outlined { background: var(--md-sys-color-surface);
                 box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant); }
.card-elevated { background: var(--md-sys-color-surface-container-low);
                 box-shadow: var(--md-sys-elevation-1); }

/* ── Tool grid ─────────────────────────────────────────────────────────── */
.tool-grid {
  margin-top: 32px;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.tool {
  padding: 24px;
  background: var(--md-sys-color-surface-container-low);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-extra-large);
  color: var(--md-sys-color-on-surface);
  transition:
    box-shadow var(--md-sys-motion-effects-default),
    border-radius var(--md-sys-motion-spatial-default),
    transform var(--md-sys-motion-spatial-default);
}
.tool:hover {
  transform: translateY(-4px);
  box-shadow: var(--md-sys-elevation-2);
  border-radius: var(--md-sys-shape-corner-extra-large-increased)
                 var(--md-sys-shape-corner-large)
                 var(--md-sys-shape-corner-extra-large-increased)
                 var(--md-sys-shape-corner-large);
}
.tool-glyph {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  margin-bottom: 16px;
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--tool-c, var(--md-sys-color-secondary-container));
  color: var(--tool-i, var(--md-sys-color-on-secondary-container));
  transition: border-radius var(--md-sys-motion-spatial-fast);
}
.tool:hover .tool-glyph { border-radius: var(--md-sys-shape-corner-full); }
.tool-glyph svg { width: 26px; height: 26px; }

.tool h3 {
  font: 500 16px/24px var(--md-ref-typeface-plain);
  letter-spacing: .15px;
  color: var(--md-sys-color-on-surface);
}
.tool p {
  margin-top: 6px;
  color: var(--md-sys-color-on-surface-variant);
  font: 400 14px/20px var(--md-ref-typeface-plain);
  letter-spacing: .25px;
}

.t-compress { --tool-c: var(--acc-compress-c); --tool-i: var(--acc-compress-i); }
.t-editor   { --tool-c: var(--acc-editor-c);   --tool-i: var(--acc-editor-i); }
.t-idphoto  { --tool-c: var(--acc-idphoto-c);  --tool-i: var(--acc-idphoto-i); }
.t-blur     { --tool-c: var(--acc-blur-c);     --tool-i: var(--acc-blur-i); }
.t-pdf      { --tool-c: var(--acc-pdf-c);      --tool-i: var(--acc-pdf-i); }
.t-scanner  { --tool-c: var(--acc-scanner-c);  --tool-i: var(--acc-scanner-i); }
.t-sign     { --tool-c: var(--acc-sign-c);     --tool-i: var(--acc-sign-i); }
.t-crop     { --tool-c: var(--acc-crop-c);     --tool-i: var(--acc-crop-i); }

/* ── Tonal bands ───────────────────────────────────────────────────────── */
.band {
  padding: 40px;
  border-radius: var(--md-sys-shape-corner-extra-large-increased);
}
.band h2 {
  font: 700 clamp(24px, 3.4vw, 32px)/1.2 var(--md-ref-typeface-brand);
  letter-spacing: -.2px;
}
.band p { margin-top: 12px; max-width: 62ch; font-size: 16px; line-height: 26px; }
.band a { color: inherit; text-underline-offset: 3px; }

.band-secondary {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.band-primary {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.band-primary .btn-filled {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

/* ── Feature tiles ─────────────────────────────────────────────────────── */
.feature-grid {
  margin-top: 32px;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.feature {
  padding: 24px;
  border-radius: var(--md-sys-shape-corner-large-increased);
  background: var(--md-sys-color-surface-container);
}
.feature .k {
  font: 700 32px/40px var(--md-ref-typeface-brand);
  color: var(--md-sys-color-primary);
}
.feature h3 {
  margin-top: 4px;
  font: 500 16px/24px var(--md-ref-typeface-plain);
  letter-spacing: .15px;
}
.feature p {
  margin-top: 6px;
  color: var(--md-sys-color-on-surface-variant);
  font: 400 14px/20px var(--md-ref-typeface-plain);
  letter-spacing: .25px;
}

/* ── App card (company landing) ────────────────────────────────────────── */
.app-card {
  display: flex;
  gap: 28px;
  align-items: center;
  padding: 32px;
  border-radius: var(--md-sys-shape-corner-extra-large);
  background: var(--md-sys-color-surface-container-low);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
  transition:
    box-shadow var(--md-sys-motion-effects-default),
    border-radius var(--md-sys-motion-spatial-default),
    transform var(--md-sys-motion-spatial-default);
}
.app-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--md-sys-elevation-3);
  border-radius: var(--md-sys-shape-corner-extra-large-increased);
}
.app-card-icon {
  width: 88px; height: 88px; flex: none;
  border-radius: var(--md-sys-shape-corner-extra-large);
  transition: border-radius var(--md-sys-motion-spatial-fast);
}
.app-card:hover .app-card-icon { border-radius: var(--md-sys-shape-corner-full); }
.app-card h2 {
  font: 700 24px/32px var(--md-ref-typeface-brand);
}
.app-card .tagline {
  margin: 2px 0 10px;
  color: var(--md-sys-color-secondary);
  font: 500 14px/20px var(--md-ref-typeface-plain);
  letter-spacing: .1px;
}
.app-card .desc {
  color: var(--md-sys-color-on-surface-variant);
  font: 400 15px/24px var(--md-ref-typeface-plain);
  letter-spacing: .3px;
}
.app-card .chip-row { margin-top: 16px; }

/* ── Footer ────────────────────────────────────────────────────────────── */
footer.site {
  margin-top: 32px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  padding: 40px 0 48px;
  text-align: center;
}
.footer-nav {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 4px;
  margin-bottom: 12px;
}
.footer-nav a {
  display: inline-flex; align-items: center;
  min-height: 48px; padding: 0 14px;
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: none;
  font: 500 14px/20px var(--md-ref-typeface-plain);
  letter-spacing: .1px;
}
footer.site .copy {
  color: var(--md-sys-color-on-surface-variant);
  font: 400 12px/16px var(--md-ref-typeface-plain);
  letter-spacing: .4px;
}

/* ── Legal / long-form prose ───────────────────────────────────────────── */
.legal { padding: 48px 0 24px; }
.legal-head h1 {
  font: 700 clamp(32px, 5vw, 45px)/1.14 var(--md-ref-typeface-brand);
}
.legal-meta {
  margin-top: 10px;
  color: var(--md-sys-color-on-surface-variant);
  font: 400 14px/20px var(--md-ref-typeface-plain);
  letter-spacing: .25px;
}
.legal-body {
  margin-top: 32px;
  padding: 40px;
  border-radius: var(--md-sys-shape-corner-extra-large);
  background: var(--md-sys-color-surface-container-low);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
}
.legal-body h2 {
  margin: 36px 0 10px;
  font: 700 22px/28px var(--md-ref-typeface-brand);
  color: var(--md-sys-color-on-surface);
  scroll-margin-top: 88px;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 {
  margin: 22px 0 6px;
  font: 500 16px/24px var(--md-ref-typeface-plain);
  letter-spacing: .15px;
  color: var(--md-sys-color-on-surface);
}
.legal-body p, .legal-body li {
  color: var(--md-sys-color-on-surface-variant);
  font: 400 16px/26px var(--md-ref-typeface-plain);
  letter-spacing: .3px;
  max-width: 72ch;
}
.legal-body p + p { margin-top: 12px; }
.legal-body ul, .legal-body ol { margin: 12px 0 0 22px; }
.legal-body li + li { margin-top: 8px; }
.legal-body a { color: var(--md-sys-color-primary); text-underline-offset: 3px; }
.legal-body strong { color: var(--md-sys-color-on-surface); font-weight: 600; }
.legal-body hr {
  margin: 32px 0; border: 0;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

@media (max-width: 640px) {
  .section { padding: 56px 0; }
  .band, .legal-body { padding: 28px 20px; }
  .hero { padding: 40px 0; }
  .app-card { flex-direction: column; align-items: flex-start; }
}

/* ── Material Symbols (icon font) ──────────────────────────────────────── */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 26px;
  user-select: none;
}
.tool-glyph .material-symbols-rounded { font-size: 26px; }
.btn .material-symbols-rounded { font-size: 20px; }
.btn-xl .material-symbols-rounded { font-size: 24px; }
.chip .material-symbols-rounded { font-size: 18px; }

/* Callout inside legal prose */
.legal-body .highlight {
  margin: 20px 0;
  padding: 20px 24px;
  border-radius: var(--md-sys-shape-corner-large-increased);
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-inline-start: 4px solid var(--md-sys-color-secondary);
}
.legal-body .highlight p { color: inherit; margin: 0; }
.legal-body .highlight strong { color: inherit; }
.legal-body .highlight a { color: inherit; }

.legal-body code {
  padding: 2px 6px;
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
}