/* FormsPal PDF Editor landing page. Token values copied from the shared
   FormsPal design system (ai.formspal.com, 2026-07-11). The footer rules at
   the bottom of this file are verbatim from ai.formspal.com/page.css. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("assets/fraunces-latin.woff2") format("woff2");
}

:root {
  --primary: #0e8a5f;
  --primary-dark: #0b6e4c;
  --btn: #0b6e4c;
  --primary-light: #e6f4ee;
  --ink: #1c2530;
  --ink-soft: #51606f;
  --faint: #6b7785;
  --line: #cdd5de;
  --bg: #f7f9fb;
  --card: #ffffff;
  --footbg: #11181c;
  --footink: #c4ccd4;
  --footline: #243038;
  --radius: 12px;
  --white: #ffffff;
  --headbg: rgba(247, 249, 251, 0.88);
  --dc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* CTA orange: formspal.com's accent. The hero button keeps the bright
     brand orange (AA as 19px-bold large text); the family header pill is
     14.5px, so --dc-btn uses the darker pair to clear 4.5:1 with white.
     Upstream note: sync this token change back to the shared header source. */
  --cta: #ea580c;
  --cta-hover: #c2410c;
  --dc-btn: #c2410c;
  --dc-btn-hover: #9a3412;
  /* Layered elevation: tight contact + mid falloff + wide ambient, so cards
     read as lit objects instead of wearing a uniform halo. */
  --shadow: 0 1px 2px rgba(16, 38, 30, 0.05), 0 4px 10px rgba(16, 38, 30, 0.05), 0 12px 28px rgba(16, 38, 30, 0.06);
  /* Top-edge highlight for dark-theme elevation; fully transparent in light. */
  --edge-hi: inset 0 1px 0 rgba(255, 255, 255, 0);
  /* Two-step vertical rhythm: one section boundary, one title-to-content gap. */
  --sp-section: 88px;
  --sp-title: 36px;
  /* One motion voice: ease-out, settle fast. */
  --ease: cubic-bezier(0.2, 0, 0, 1);
}
html[data-theme="dark"] {
  --primary: #16a571;
  --primary-dark: #34c188;
  --btn: #0c7a54;
  --primary-light: #143323;
  --ink: #f2f5f7;
  --ink-soft: #aab5bf;
  --faint: #8e99a4;
  --line: #2a3036;
  --bg: #15181b;
  /* Dark elevation = a lighter surface + a top-edge highlight, not shadow
     (black-on-black smearing was all the old 20px blur bought us). */
  --card: #21262d;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --edge-hi: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --footbg: #0c1114;
  --footink: #aab5bf;
  --footline: #1c252b;
  --white: #1e2329;
  --headbg: rgba(21, 24, 27, 0.88);
}

:root { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }

/* Keyboard escape hatch past the sticky mega menu (~100 tab stops). */
.skip-link {
  position: absolute; left: -9999px; z-index: 100;
  background: var(--cta); color: #fff; font-weight: 700;
  padding: 10px 18px; border-radius: 0 0 10px 0; text-decoration: none;
}
.skip-link:focus { left: 0; top: 0; }

/* In-page anchors must clear the sticky header. */
#stores, #faq, #main { scroll-margin-top: 72px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink); background: var(--bg); line-height: 1.55;
}
/* Light-on-dark serifs bloom under subpixel AA; grayscale only in dark. */
html[data-theme="dark"] body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { max-width: 100%; height: auto; }
a { color: var(--primary-dark); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
/* Display type: em-based tracking that tightens with size, display leading
   (body's 1.55 is paragraph leading), balanced rag on multi-line headings. */
h1, h2 {
  font-family: "Fraunces", Georgia, serif; font-weight: 600;
  letter-spacing: -0.018em; line-height: 1.15;
  font-optical-sizing: auto; text-wrap: balance;
}
.hero .sub, .tile p, .faq details p, .privacy li { text-wrap: pretty; }

/* Brand-green selection keeps each theme's own text color legible. */
::selection { background: rgba(14, 138, 95, 0.25); }
html[data-theme="dark"] ::selection { background: rgba(52, 193, 136, 0.38); }

/* One focus ring for every page-owned interactive element. */
.badge:focus-visible, .cta-alt a:focus-visible, .privacy a:focus-visible,
.faq details a:focus-visible, .skip-link:focus-visible {
  outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 4px;
}
.badge:focus-visible { border-radius: 12px; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; padding: 48px 0 var(--sp-section); }
.eyebrow { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: var(--primary-dark); margin: 0 0 10px; }
.hero h1 { font-size: 52px; line-height: 1.08; letter-spacing: -0.024em; font-weight: 640; margin: 0 0 18px; }
.hero .sub { font-size: 19px; color: var(--ink-soft); margin: 0 0 28px; max-width: 34em; }
.cta-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--cta); color: #fff; text-decoration: none;
  border-radius: 11px; padding: 14px 30px; font-size: 19px; font-weight: 700;
  box-shadow: 0 1px 3px rgba(154, 52, 18, 0.25);
  transition: background-color 180ms var(--ease), box-shadow 180ms var(--ease), transform 120ms var(--ease);
}
/* 19px bold = WCAG "large text", so white on the brand orange (3.55:1) meets
   AA; at 17px it silently failed the 4.5:1 normal-text bar. */
.cta-btn:hover { background: var(--cta-hover); box-shadow: 0 5px 14px rgba(154, 52, 18, 0.3); }
.cta-btn:active { transform: scale(0.98); box-shadow: 0 1px 3px rgba(154, 52, 18, 0.25); transition-duration: 80ms; }
.cta-btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
/* Clean white browser mark (currentColor = the button's white text). */
.cta-ico { width: 19px; height: 19px; flex: none; color: #fff; }
/* --ink-soft, not --faint: 14px text on the page background needs 4.5:1. */
.cta-alt { margin: 12px 0 0; font-size: 14px; color: var(--ink-soft); }
.cta-alt a { color: inherit; }
.hero-art { position: relative; text-align: center; }
/* Aurora rim light: a soft OKLCH color wheel (green, cyan, violet, amber)
   turns behind the shot like studio rim lighting. It is a blurred CIRCLE
   rotated via transform, so its silhouette never changes: the 40px blur
   rasterizes once and the rotation stays GPU-composited. Brightens with
   hover; holds a static gradient under reduced motion. */
.hero-art::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: conic-gradient(in oklch,
    oklch(72% 0.16 160), oklch(74% 0.12 210), oklch(68% 0.17 300),
    oklch(80% 0.13 90), oklch(72% 0.16 160));
  filter: blur(40px) saturate(1.2); opacity: 0.26;
  transition: opacity 350ms var(--ease);
}
html[data-theme="dark"] .hero-art::before { opacity: 0.45; }
.hero-art:hover::before { opacity: 0.4; }
html[data-theme="dark"] .hero-art:hover::before { opacity: 0.62; }
@media (prefers-reduced-motion: no-preference) {
  .hero-art::before { animation: fp-aurora 26s linear infinite; }
}
@keyframes fp-aurora { to { transform: translate(-50%, -50%) rotate(360deg); } }
.hero-art picture, .hero-art img { position: relative; }
/* The shot floats in front of the aurora. The <picture> is the visible card:
   it clips an 8px white capture strip baked into the bottom of both popup
   assets (img pulls up by 8/720 of the width) and carries the ring + lift
   shadows, since overflow:hidden on it would clip any shadow set on the img. */
.hero-art img { width: 100%; display: block; margin-bottom: -1.12%; }
.hero-art picture {
  overflow: hidden; border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(16, 38, 30, 0.08), 0 24px 64px rgba(16, 38, 30, 0.24), 0 4px 16px rgba(16, 38, 30, 0.12);
}
html[data-theme="dark"] .hero-art picture {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 28px 70px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.5);
}
.art-dark { display: none; }
html[data-theme="dark"] .art-dark { display: block; }
html[data-theme="dark"] .art-light { display: none; }

/* ---------- feature tiles ---------- */
.section-title { font-size: 32px; text-align: center; margin: 0 0 var(--sp-title); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-bottom: var(--sp-section); }
.tile {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow), var(--edge-hi); padding: 22px; display: flex; flex-direction: column; gap: 10px;
  transition: box-shadow 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}
.tile:hover { border-color: rgba(14, 138, 95, 0.35); box-shadow: 0 10px 28px rgba(16, 38, 30, 0.12), var(--edge-hi); }
html[data-theme="dark"] .tile:hover { border-color: rgba(22, 165, 113, 0.4); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), var(--edge-hi); }
/* Shadows carry the light-theme lift; soften the doubled hard border (scoped:
   the --line token itself feeds the shared header and must not change). */
.tile, .faq details { border-color: rgba(28, 37, 48, 0.10); }
html[data-theme="dark"] .tile, html[data-theme="dark"] .faq details { border-color: var(--line); }
.tile .t-ico { color: var(--primary); }
.tile .t-ico svg { width: 26px; height: 26px; display: block; }
.tile h3 { margin: 0; font-size: 17.5px; text-wrap: balance; }
.tile p { margin: 0 0 4px; font-size: 14.5px; color: var(--ink-soft); }
/* The <picture> wrapper is the flex child, so it carries the bottom-alignment
   (margin-top:auto on the inner img never worked through the wrapper). */
.tile picture { display: block; margin-top: auto; }
.tile-shot { border-radius: 10px; border: 1px solid var(--line); display: block; width: 100%; box-shadow: 0 1px 3px rgba(16, 38, 30, 0.07); }
html[data-theme="dark"] .tile-shot { border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
/* Theme-paired imagery: each shot ships in both themes and swaps with the page.
   Hiding the <picture> too (where :has exists) removes the phantom inline gap
   an empty wrapper leaves behind; the img rules stay as the fallback. */
html[data-theme="light"] .only-dark { display: none; }
html[data-theme="dark"] .only-light { display: none; }
html[data-theme="light"] picture:has(.only-dark), html[data-theme="light"] picture:has(.art-dark) { display: none; }
html[data-theme="dark"] picture:has(.only-light), html[data-theme="dark"] picture:has(.art-light) { display: none; }

/* ---------- store badges ---------- */
.stores { text-align: center; padding-bottom: var(--sp-section); }
.badges { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
/* Official download-badge convention: solid dark pill, full-color store logo,
   white two-line text. Dark in both page themes so the Chrome and Firefox
   logos (which have white centers) always read, and all three stay uniform. */
.badge {
  display: inline-flex; align-items: center; gap: 11px; text-decoration: none;
  background: #16191d; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px; padding: 10px 18px;
  font-size: 15px; font-weight: 600;
  transition: transform 180ms var(--ease), border-color 180ms var(--ease);
}
.badge:hover { border-color: rgba(255, 255, 255, 0.42); }
.badge:active { transform: translateY(0) scale(0.98); transition-duration: 80ms; }
@media (prefers-reduced-motion: no-preference) {
  .badge:hover { transform: translateY(-1px); }
}
/* On the dark page the pill needs one elevation step or it melts into --bg. */
html[data-theme="dark"] .badge { background: #1f252b; border-color: rgba(255, 255, 255, 0.15); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.badge small { display: block; font-size: 10.5px; font-weight: 500; color: rgba(255, 255, 255, 0.6); text-align: left; letter-spacing: 0.01em; }
.badge .b-ico { width: 28px; height: 28px; flex: none; }
/* Chrome and Firefox carry their own brand colors; the Apple mark is white. */
.badge .b-ico-apple { color: #fff; }
.badge span { text-align: left; line-height: 1.16; }
.stores .badge-note { margin: 16px 0 0; font-size: 14px; color: var(--ink-soft); }

/* ---------- privacy panel ---------- */
.privacy {
  text-align: center;
  background: linear-gradient(180deg, #eaf6f0 0%, #e1f0e9 100%);
  border: 1px solid rgba(14, 138, 95, 0.24);
  border-radius: 20px; padding: 48px 48px 40px;
  max-width: 920px; margin: 0 auto var(--sp-section);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 1px 2px rgba(16, 38, 30, 0.04);
}
html[data-theme="dark"] .privacy {
  background: linear-gradient(180deg, #17382a 0%, #102a1f 100%);
  border-color: rgba(52, 193, 136, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.privacy-shield {
  display: inline-flex; width: 54px; height: 54px; border-radius: 16px;
  background: var(--primary); color: #fff; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.privacy-shield svg { width: 28px; height: 28px; }
.privacy h2 { font-size: 32px; margin: 0 0 24px; }
.privacy h2 em { font-style: normal; color: var(--primary-dark); font-weight: 700; }
.privacy ul {
  margin: 0 auto 20px; padding: 0; list-style: none; max-width: 680px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; text-align: left;
}
.privacy li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--ink); line-height: 1.45; }
.privacy li::before {
  content: "\2713"; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: 12px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.privacy > p { margin: 0; font-size: 14px; color: var(--ink-soft); }
.privacy > p a { color: var(--primary-dark); font-weight: 600; }

/* ---------- FAQ ---------- */
.faq { padding-bottom: var(--sp-section); max-width: 760px; margin: 0 auto; }
.faq h2 { text-align: center; font-size: 32px; margin: 0 0 var(--sp-title); }
.faq details {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 20px; margin-bottom: 12px; box-shadow: var(--edge-hi);
}
/* Custom disclosure: the UA triangle reads unrefined; a right-aligned chevron
   rotates on open, and the answer fades up (motion-gated). */
.faq summary {
  font-weight: 700; font-size: 15.5px; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 8px; height: 8px; margin-right: 2px;
  border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
  transform: rotate(45deg) translateY(-1px);
  transition: transform 200ms var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-1px); }
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] > p { animation: fp-faq-open 200ms var(--ease); }
}
@keyframes fp-faq-open {
  from { opacity: 0; transform: translateY(-4px); }
}
.faq summary:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.faq details p { margin: 10px 0 4px; font-size: 14.5px; color: var(--ink-soft); max-width: 62ch; }

/* ---------- closing CTA ---------- */
.closer { text-align: center; padding-bottom: 72px; }
.closer .section-title { margin-bottom: 22px; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  :root { --sp-section: 56px; --sp-title: 28px; }
  .hero { grid-template-columns: 1fr; gap: 32px; padding: 32px 0 var(--sp-section); text-align: center; }
  .hero .sub { margin-left: auto; margin-right: auto; }
  .hero h1 { font-size: 38px; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .privacy ul { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .tiles { grid-template-columns: 1fr; }
  .hero-art picture { width: min(300px, 100%); }
  .cta-btn { width: 100%; justify-content: center; }
  .badges { flex-direction: column; align-items: center; gap: 10px; }
  .badge { width: 100%; max-width: 300px; }
  .privacy { padding: 32px 22px 28px; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto !important; }
}

/* ==== FormsPal site footer, copied verbatim from ai.formspal.com/page.css on 2026-07-11. Re-sync by re-running Task 0 of the landing-page plan. ==== */

/* ---------- footer ---------- */
    .site-foot { background: var(--footbg); color: var(--footink); margin-top: 48px; }

.site-foot a { color: var(--footink); text-decoration: none; }

.site-foot a:hover { color: #fff; }

.foot-cols { max-width: 1180px; margin: 0 auto; padding: 44px 20px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px; }

.foot-brand svg { width: 34px; height: 34px; }

.foot-brand b { display: block; font-size: 18px; font-weight: 800; color: #fff; margin: 8px 0 6px; }

.foot-brand p { font-size: 13.5px; line-height: 1.6; margin: 0 0 12px; max-width: 260px; }

.foot-addr { font-size: 12.5px; line-height: 1.65; color: var(--footink); margin: 14px 0 0; max-width: 260px; font-style: normal; }

.foot-addr strong { display: block; color: #fff; font-weight: 700; margin-bottom: 2px; }

.foot-col h3, .foot-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: #fff; margin: 0 0 12px; font-weight: 700; }

.foot-col ul { list-style: none; margin: 0; padding: 0; }

.foot-col li { margin-bottom: 9px; font-size: 14px; }

.foot-bottom { border-top: 1px solid var(--footline); }

.foot-bottom-inner { max-width: 1180px; margin: 0 auto; padding: 16px 20px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 13px; }

.foot-bottom-inner .legal { display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto; }

.foot-share { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border: 1px solid var(--footline); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; transition: border-color .15s, color .15s; }

.foot-share:hover { border-color: var(--primary); color: var(--primary); }

.foot-share svg { flex: none; }

.foot-disc { max-width: 1180px; margin: 0 auto; padding: 0 20px 26px; font-size: 12px; color: var(--faint); }

@media (max-width: 900px) {
      .foot-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
    }

@media (max-width: 560px) {
      .foot-cols { grid-template-columns: 1fr; }
    }

/* ==== FormsPal family header (mega menu), copied from
   statute-of-limitations.formspal.com landing.css on 2026-07-12;
   dark selectors rewritten to html[data-theme]. ==== */
.site-head{position:sticky;top:0;z-index:30;background:var(--headbg);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line);font-family:var(--dc-font)}
.site-head-inner{box-sizing:border-box;position:relative;max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:11px 20px}
.site-brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none}
.site-brand svg{width:30px;height:30px}
.site-brand b{font-size:19px;font-weight:800;letter-spacing:-.3px;color:var(--ink)}
.navburger{display:none;margin-left:4px;align-items:center;gap:7px;cursor:pointer;user-select:none;font-size:14.5px;font-weight:700;color:var(--ink);padding:8px 12px;border:1.5px solid var(--line);border-radius:9px}
.site-nav{display:flex;align-items:center;gap:2px;margin-left:4px}
.nav-item{position:relative}
.nav-top{display:inline-flex;align-items:center;gap:5px;cursor:pointer;background:none;border:0;font-family:inherit;color:var(--ink-soft);font-size:14.5px;font-weight:600;padding:8px 11px;border-radius:8px;white-space:nowrap}
.nav-top svg{width:11px;height:11px;transition:transform .15s}
.nav-item:hover .nav-top,.nav-item:focus-within .nav-top{color:var(--primary-dark);background:var(--primary-light)}
.nav-item:hover .nav-top svg,.nav-item:focus-within .nav-top svg{transform:rotate(180deg)}
.nav-panel{display:none;position:absolute;top:calc(100% + 9px);left:0;z-index:40;flex-wrap:wrap;gap:4px 22px;padding:16px 18px;background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px #10182029;width:max-content;max-width:min(720px,92vw);align-content:start}
.nav-panel:before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.nav-panel.alignright{left:auto;right:0}
.nav-item:hover>.nav-panel,.nav-item:focus-within>.nav-panel{display:flex}
.mega-col{min-width:192px}
.mega-head{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;color:var(--faint);margin:8px 0 5px;padding:0 6px;text-decoration:none}
.mega-col>.mega-head:first-child{margin-top:0}
a.mega-head:hover{color:var(--primary-dark)}
.nav-panel ul{list-style:none;margin:0;padding:0}
.nav-panel a{display:block;text-decoration:none;color:var(--ink);font-size:13.5px;font-weight:500;padding:5px 6px;border-radius:7px;white-space:nowrap}
.nav-panel a:hover{color:var(--primary-dark);background:var(--primary-light)}
.mega-sub{margin:1px 0 4px 9px;padding-left:7px;border-left:1px solid var(--line)}
.mega-sub a{font-size:12.5px;color:var(--ink-soft);padding:3px 6px}
.site-cta{text-decoration:none;background:var(--dc-btn);color:#fff;font-weight:700;font-size:14.5px;padding:9px 16px;border-radius:9px;white-space:nowrap}
.site-cta:hover{background:var(--dc-btn-hover)}
@media(max-width:1180px){.navburger{display:inline-flex}.site-nav{display:none}.navtoggle:checked~.site-nav{display:flex;position:absolute;left:12px;right:12px;top:calc(100% + 6px);background:var(--white);border:1px solid var(--line);border-radius:12px;flex-direction:column;align-items:stretch;padding:8px;gap:0;max-height:78vh;overflow-y:auto;box-shadow:0 12px 30px #00000038}.site-head .nav-item{position:static;border-top:1px solid var(--line)}.site-head .nav-item:first-child{border-top:0}.nav-top{width:100%;justify-content:space-between;font-size:15px;padding:13px 12px}.nav-panel{position:static;display:none;opacity:1;transform:none;transition:none;flex-direction:column;flex-wrap:nowrap;gap:0;border:0;border-radius:0;box-shadow:none;padding:0 0 8px 14px;width:auto;max-width:none}.nav-panel:before{display:none}.nav-item:hover>.nav-panel,.nav-item:focus-within>.nav-panel{display:none}.nav-item:hover .nav-top,.nav-item:focus-within .nav-top{color:var(--ink-soft);background:none}.nav-item:hover .nav-top svg,.nav-item:focus-within .nav-top svg{transform:none}.nav-item.open>.nav-panel{display:flex}.nav-item.open .nav-top{color:var(--primary-dark);background:var(--primary-light)}.nav-item.open .nav-top svg{transform:rotate(180deg)}.mega-col{min-width:0}.nav-panel a{white-space:normal}}
@media(max-width:560px){.site-head-inner{gap:10px;padding:11px 14px}.site-brand b,.site-signin{display:none}.site-cta{padding:8px 13px}}
.site-signin{text-decoration:none;color:var(--ink-soft);font-weight:600;font-size:14.5px;padding:8px 10px}
.site-signin:hover{color:var(--primary-dark)}
/* Push the action cluster (toggle, sign in, CTA) to the right edge at every
   width, including when the nav collapses to the burger. */
.site-theme-toggle{margin-left:auto;width:38px;height:38px;border-radius:50%;flex:none;padding:0;cursor:pointer;background:var(--white);border:1.5px solid var(--line);display:inline-flex;align-items:center;justify-content:center}
.site-theme-toggle:hover{border-color:var(--primary)}
.site-theme-toggle svg{width:17px;height:17px}
.site-theme-toggle .sun{display:none;stroke:#e8a32b}
.site-theme-toggle .moon{display:block;stroke:var(--primary)}
html[data-theme="dark"] .site-theme-toggle .sun{display:block}
html[data-theme="dark"] .site-theme-toggle .moon{display:none}

/* ==== Ambient depth + motion, ported from trust.formspal.com (2026-07-13).
   Everything below reads the existing tokens, works in both themes, and is
   inert under prefers-reduced-motion. The reveal class is only ever attached
   by page.js when motion is allowed, so content never hides without it. ==== */

/* Decorative layers (hero wash, package shadows) may extend past the viewport
   edge; clip there so they can never summon a horizontal scrollbar. clip (not
   hidden) adds no scroll container; older engines ignore it harmlessly. */
body { overflow-x: clip; }

/* Aurora mesh: three fixed brand-tinted radials give the page quiet depth.
   The grain layer (local asset: CSP img-src is 'self', no data: URIs) kills
   gradient banding and adds a matte tooth. Both sit behind all content. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(58% 48% at 12% -4%, rgba(14, 138, 95, 0.09), transparent 70%),
    radial-gradient(52% 44% at 104% 6%, rgba(234, 88, 12, 0.06), transparent 68%),
    radial-gradient(80% 62% at 50% 108%, rgba(14, 138, 95, 0.05), transparent 72%);
}
html[data-theme="dark"] body::before {
  background:
    radial-gradient(58% 48% at 12% -4%, rgba(22, 165, 113, 0.16), transparent 70%),
    radial-gradient(52% 44% at 104% 6%, rgba(234, 88, 12, 0.10), transparent 68%),
    radial-gradient(80% 62% at 50% 108%, rgba(22, 165, 113, 0.08), transparent 72%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.025; mix-blend-mode: multiply;
  background: url("assets/grain.svg"); background-size: 140px 140px;
}
html[data-theme="dark"] body::after { opacity: 0.04; mix-blend-mode: overlay; }

/* Reading-progress hairline above the sticky header (header is z-index 30). */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60;
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
  background: linear-gradient(90deg, var(--primary-dark), var(--primary));
  box-shadow: 0 0 10px rgba(14, 138, 95, 0.5);
}
html[data-theme="dark"] .scroll-progress { box-shadow: 0 0 10px rgba(22, 165, 113, 0.5); }

/* Once the page scrolls, the glass header earns a soft drop shadow. */
.site-head { transition: box-shadow 250ms var(--ease); }
.site-head.scrolled { box-shadow: 0 6px 22px -12px rgba(16, 38, 30, 0.35); }
html[data-theme="dark"] .site-head.scrolled { box-shadow: 0 6px 22px -12px rgba(0, 0, 0, 0.6); }

/* Hero glows: painted as radial gradients on a full-bleed pseudo-element, not
   as blurred divs. Gradient falloff is smooth by construction, so there is no
   blur filter to clip into visible seams and no overflow/scrollbar concern;
   they simply breathe in on load. The copy/art columns sit above. */
.hero { position: relative; }
.hero-copy { position: relative; }
main { position: relative; }
main::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 760px; pointer-events: none;
  background:
    radial-gradient(56% 84% at 10% -12%, rgba(14, 138, 95, 0.12), transparent 66%),
    radial-gradient(48% 72% at 94% -8%, rgba(234, 88, 12, 0.06), transparent 62%);
}
html[data-theme="dark"] main::before {
  background:
    radial-gradient(56% 84% at 10% -12%, rgba(22, 165, 113, 0.17), transparent 66%),
    radial-gradient(48% 72% at 94% -8%, rgba(234, 88, 12, 0.10), transparent 62%);
}
@media (prefers-reduced-motion: no-preference) {
  main::before { animation: fp-glow-in 1.8s var(--ease) both; }
}
@keyframes fp-glow-in { from { opacity: 0; } }

/* Gradient sheen on the hero's key phrase (52px display text clears large-text
   contrast with the darker token in the mix). Static under reduced motion. */
.grad {
  background: linear-gradient(92deg, var(--primary-dark), var(--primary), var(--primary-dark));
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .grad { animation: fp-sheen 9s ease-in-out infinite; }
}
@keyframes fp-sheen { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

/* Hand-drawn underline, drawn on like a signature. The resting state is the
   finished stroke, so reduced-motion (and no-JS) visitors see it complete.
   Below 860px the hero centers, and the squiggle follows it. */
.sig { display: block; width: min(250px, 62%); margin: 0 0 16px; color: var(--primary); }
@media (max-width: 860px) { .sig { margin-left: auto; margin-right: auto; } }
html[data-theme="dark"] .sig { color: var(--primary-dark); }
@media (prefers-reduced-motion: no-preference) {
  .sig path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: fp-sig-draw 1.5s 350ms var(--ease) forwards; }
}
@keyframes fp-sig-draw { to { stroke-dashoffset: 0; } }

/* Eyebrow picks up the trust-center gradient dash. */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), transparent);
}

/* CTA shine: a skewed specular sweep crosses the button on hover. */
.cta-btn { position: relative; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .cta-btn::after {
    content: ""; position: absolute; top: 0; left: -75%; width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: skewX(-18deg); transition: left 600ms var(--ease); pointer-events: none;
  }
  .cta-btn:hover::after { left: 130%; }
}

/* Header action cluster: the copied family header expects its children flat
   inside .site-head-inner, but this page wraps them in .site-right, which was
   an unstyled block, so the toggle, Sign In, and CTA sat misaligned on a text
   baseline. Make the wrapper the flex row the originals assumed. */
.site-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.site-right .site-theme-toggle { margin-left: 0; }

/* Header CTA: the same life as the hero button, scaled down. Lift + orange
   glow + shine sweep on hover, press feedback, and a visible focus ring.
   (Kept out of the verbatim family-header block so re-syncs stay clean.) */
.site-cta {
  position: relative; overflow: hidden;
  box-shadow: 0 1px 2px rgba(154, 52, 18, 0.25);
  transition: background-color 180ms var(--ease), box-shadow 180ms var(--ease), transform 120ms var(--ease);
}
.site-cta:hover { box-shadow: 0 4px 12px rgba(154, 52, 18, 0.35); }
.site-cta:active { transform: scale(0.97); transition-duration: 80ms; }
.site-cta:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .site-cta:hover { transform: translateY(-1px); }
  .site-cta::after {
    content: ""; position: absolute; top: 0; left: -75%; width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: skewX(-18deg); transition: left 500ms var(--ease); pointer-events: none;
  }
  .site-cta:hover::after { left: 130%; }
  .site-cta:active { transform: translateY(0) scale(0.97); }
}

/* Section hairlines fade at the edges instead of a hard full-width rule. */
.ruled { position: relative; padding-top: 44px; }
.ruled::before {
  content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 16%, var(--line) 84%, transparent);
}

/* Pointer spotlight: cards get a soft brand highlight that tracks the cursor
   (--mx/--my set from page.js; the -30% resting spot keeps a faint top glow). */
.tile {
  background:
    radial-gradient(260px 220px at var(--mx, 50%) var(--my, -30%), rgba(14, 138, 95, 0.07), transparent 60%),
    var(--card);
}
html[data-theme="dark"] .tile {
  background:
    radial-gradient(260px 220px at var(--mx, 50%) var(--my, -30%), rgba(22, 165, 113, 0.10), transparent 60%),
    var(--card);
}
.faq details {
  background:
    radial-gradient(300px 170px at var(--mx, 50%) var(--my, -30%), rgba(14, 138, 95, 0.05), transparent 60%),
    var(--card);
}
html[data-theme="dark"] .faq details {
  background:
    radial-gradient(300px 170px at var(--mx, 50%) var(--my, -30%), rgba(22, 165, 113, 0.08), transparent 60%),
    var(--card);
}

/* Hero shot in the aurora: the <picture> is only the tilt carrier (vars set
   by page.js on capable pointers), the img carries the object shadows, and
   the whole assembly levitates. On hover the shadow deepens and the aurora
   behind (see .hero-art::before above) brightens. */
.hero-art { perspective: 1100px; }
.hero-art picture {
  display: block; position: relative; width: min(360px, 100%); margin: 0 auto;
  will-change: transform;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 250ms var(--ease), box-shadow 350ms var(--ease);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-art { animation: fp-float 7s ease-in-out infinite alternate; }
}
@keyframes fp-float { from { transform: translateY(4px); } to { transform: translateY(-8px); } }
.hero-art:hover picture {
  box-shadow:
    0 0 0 1px rgba(16, 38, 30, 0.08),
    0 32px 80px rgba(16, 38, 30, 0.28), 0 8px 24px rgba(16, 38, 30, 0.14),
    0 24px 72px rgba(14, 138, 95, 0.18);
}
html[data-theme="dark"] .hero-art:hover picture {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 32px 80px rgba(0, 0, 0, 0.68), 0 6px 18px rgba(0, 0, 0, 0.5),
    0 24px 72px rgba(22, 165, 113, 0.22);
}

/* Tile mini-demos: the three shotless tiles carry "data" built from the
   popup's own visual language (chip colors match popup.html's --c-* tokens,
   the dropzone echoes its dashed drop area, the pills echo the privacy
   checklist). Each sits at the tile foot like the screenshot tiles. */
.convert-demo {
  margin-top: auto; padding: 16px 0 6px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.fmt {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #fff;
  padding: 4px 9px; border-radius: 6px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.fmt-pdf { background: #c1574f; }
.fmt-doc { background: #5d88bd; }
.fmt-xls { background: #72a957; }
.fmt-ppt { background: #cb7f3f; }
.fmt-png { background: #dab04a; }
.fmt-jpg { background: #ce973c; }
.fmt-fan { display: flex; flex-wrap: wrap; gap: 6px; max-width: 148px; }
.convert-arrows { width: 24px; height: 24px; flex: none; color: var(--primary); transition: transform 250ms var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .tile:hover .convert-arrows { transform: scaleX(1.25); }
}

.drop-demo {
  margin-top: auto; padding: 13px 12px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  border: 1.5px dashed rgba(14, 138, 95, 0.45); border-radius: 10px;
  color: var(--ink-soft); font-size: 13px; font-weight: 600;
  background: rgba(14, 138, 95, 0.04);
}
html[data-theme="dark"] .drop-demo { border-color: rgba(52, 193, 136, 0.4); background: rgba(22, 165, 113, 0.07); }
.drop-demo svg { width: 18px; height: 18px; flex: none; color: var(--primary); }

.priv-demo { margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.priv-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  padding: 5px 12px 5px 8px; border-radius: 999px;
  border: 1px solid rgba(14, 138, 95, 0.3); background: rgba(14, 138, 95, 0.07);
}
html[data-theme="dark"] .priv-pill { border-color: rgba(52, 193, 136, 0.32); background: rgba(22, 165, 113, 0.1); }
.priv-pill::before {
  content: "\2713"; flex: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: 10px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Scroll reveal: page.js attaches .reveal only when motion is allowed, then
   .in fades each element up. Tiles and badges stagger by grid position. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 650ms var(--ease), transform 650ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.tile.reveal:nth-child(3n - 1), .badge.reveal:nth-child(2) { transition-delay: 90ms; }
.tile.reveal:nth-child(3n), .badge.reveal:nth-child(3) { transition-delay: 180ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}