/* Attention Arrow — site styles
   One layout, three skins: glow (Graphite Glow), graphite (Graphite), ivory (Ivory).
   The skin is set on <html data-skin="..."> by the small script in each page's <head>. */

/* ---------- Fonts (self-hosted, no third-party requests) ---------- */
@font-face { font-family: "Sora"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/sora-300.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/sora-400.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/sora-500.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/sora-600.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/sora-700.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/fraunces-500.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 500; font-style: italic; font-display: swap; src: url("../fonts/fraunces-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/manrope-800.woff2") format("woff2"); }

/* ---------- Skin tokens ---------- */
:root, [data-skin="glow"] {
  color-scheme: dark;
  --bg: #17171a; --bg-alt: #1a1a1e; --surface: #1f1f24; --surface-2: #1c1c20; --footer: #121214;
  --border: #26262c; --border-2: #2f2e35; --border-3: #45444c; --input-border: #3a3940; --input-bg: #17171a;
  --text: #faf8f3; --text-2: #bdbac4; --text-3: #a9a6b0; --muted: #8f8c96; --num: #6b6872;
  --accent: #e6926c; --mint: #6fc2ae; --mint-text: #9fd8ca; --mint-glow: #6fc2ae; --clay-glow: #e6926c;
  --header-bg: rgba(23,23,26,0.92);
  --nav-bg: #1d1d21; --nav-border: #2c2c32; --nav-text: #c3c0ca; --nav-active-bg: #faf8f3; --nav-active-text: #17171a;
  --btn-bg: linear-gradient(180deg, #eea07c 0%, #e0855e 100%); --btn-text: #17171a;
  --btn-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 12px 32px rgba(230,146,108,0.35);
  --mint-btn-bg: linear-gradient(180deg, #86d0bd 0%, #62b8a3 100%); --mint-btn-text: #17171a;
  --mint-btn-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 12px 30px rgba(111,194,174,0.3);
  --ghost-bg: rgba(31,31,36,0.6);
  --hero-bg: radial-gradient(circle at 78% 40%, rgba(230,146,108,0.13) 0%, rgba(230,146,108,0) 42%), radial-gradient(circle at 15% 85%, rgba(111,194,174,0.08) 0%, rgba(111,194,174,0) 40%), radial-gradient(rgba(250,248,243,0.07) 1px, transparent 1.2px), #17171a;
  --hero-bg-size: auto, auto, 28px 28px, auto;
  --edge-clay: linear-gradient(160deg, rgba(230,146,108,0.45) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.03) 100%);
  --edge-mint: linear-gradient(160deg, rgba(111,194,174,0.45) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.03) 100%);
  --edge-mix: linear-gradient(140deg, rgba(230,146,108,0.55) 0%, rgba(255,255,255,0.06) 45%, rgba(111,194,174,0.4) 100%);
  --edge-ffp: linear-gradient(150deg, rgba(111,194,174,0.6) 0%, rgba(255,255,255,0.05) 45%, rgba(111,194,174,0.15) 100%);
  --ffp-bg: radial-gradient(circle at 90% 0%, rgba(111,194,174,0.14) 0%, rgba(111,194,174,0) 45%), #1f1f24;
  --ffp-border: #3f6a60; --ffp-badge-bg: rgba(111,194,174,0.1);
  --cta-bg: radial-gradient(circle at 85% 50%, rgba(230,146,108,0.16) 0%, rgba(230,146,108,0) 45%), radial-gradient(rgba(250,248,243,0.06) 1px, transparent 1.2px), #1c1c20;
  --cta-bg-size: auto, 24px 24px, auto;
  --more-bg: radial-gradient(rgba(250,248,243,0.06) 1px, transparent 1.2px), #1c1c20; --more-bg-size: 22px 22px, auto;
  --shadow-lg: 0 40px 100px rgba(0,0,0,0.5); --glow-halo: 0 0 120px rgba(230,146,108,0.12);
  --footer-line: linear-gradient(90deg, #121214 0%, #e6926c 35%, #6fc2ae 65%, #121214 100%);
  --heading-font: "Sora", system-ui, sans-serif; --heading-weight: 300; --heading-tracking: -0.03em;
  --em-weight: 700; --em-style: normal;
  --panel: #f1e3d3; --panel-ring: #e2c9b0;
}

[data-skin="graphite"] {
  --hero-bg: radial-gradient(circle at 75% 35%, #2c2b31 0%, #17171a 60%);
  --hero-bg-size: auto;
  --btn-bg: #e6926c; --btn-shadow: 0 10px 28px rgba(230,146,108,0.3);
  --mint-btn-bg: #6fc2ae; --mint-btn-shadow: 0 10px 28px rgba(111,194,174,0.25);
  --edge-clay: #2c2c33; --edge-mint: #2c2c33; --edge-mix: #2f2e35; --edge-ffp: #2f3a37;
  --ffp-bg: radial-gradient(circle at 85% 0%, #22302c 0%, #1f1f24 55%);
  --cta-bg: radial-gradient(circle at 85% 50%, rgba(230,146,108,0.12) 0%, rgba(230,146,108,0) 45%), #1c1c20; --cta-bg-size: auto;
  --more-bg: #1f1f24; --more-bg-size: auto;
  --shadow-lg: 0 40px 80px rgba(0,0,0,0.45); --glow-halo: 0 0 0 transparent;
  --footer-line: linear-gradient(90deg, #121214 0%, #e6926c 35%, #6fc2ae 65%, #121214 100%);
}

[data-skin="ivory"] {
  color-scheme: light;
  --bg: #faf8f3; --bg-alt: #f3ece1; --surface: #ffffff; --surface-2: #fffaf3; --footer: #f6e6d7;
  --border: #ece5d8; --border-2: #e4d9c8; --border-3: #d9cdbb; --input-border: #d9cdbb; --input-bg: #faf8f3;
  --text: #1a1916; --text-2: #4a463f; --text-3: #5e594f; --muted: #6b5a4a; --num: #a0907c;
  --accent: #a04d30; --mint: #2f8f78; --mint-text: #1e6b5c; --mint-glow: rgba(47,143,120,0.5); --clay-glow: rgba(160,77,48,0.45);
  --header-bg: rgba(250,248,243,0.92);
  --nav-bg: #f1e7da; --nav-border: #e4d9c8; --nav-text: #4a463f; --nav-active-bg: #1a1916; --nav-active-text: #faf8f3;
  --btn-bg: linear-gradient(180deg, #c4683f 0%, #ad532f 100%); --btn-text: #faf8f3;
  --btn-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 12px 28px rgba(173,83,47,0.28);
  --mint-btn-bg: linear-gradient(180deg, #24806d 0%, #1e6b5c 100%); --mint-btn-text: #faf8f3;
  --mint-btn-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 12px 28px rgba(30,107,92,0.25);
  --ghost-bg: rgba(255,255,255,0.7);
  --hero-bg: radial-gradient(circle at 78% 40%, rgba(230,146,108,0.13) 0%, rgba(230,146,108,0) 42%), radial-gradient(circle at 15% 85%, rgba(111,194,174,0.1) 0%, rgba(111,194,174,0) 40%), radial-gradient(rgba(26,25,22,0.07) 1px, transparent 1.2px), #faf8f3;
  --edge-clay: linear-gradient(160deg, rgba(230,146,108,0.55) 0%, rgba(26,25,22,0.06) 50%, rgba(26,25,22,0.04) 100%);
  --edge-mint: linear-gradient(160deg, rgba(111,194,174,0.6) 0%, rgba(26,25,22,0.06) 50%, rgba(26,25,22,0.04) 100%);
  --edge-mix: linear-gradient(140deg, rgba(230,146,108,0.6) 0%, rgba(26,25,22,0.06) 45%, rgba(111,194,174,0.5) 100%);
  --edge-ffp: linear-gradient(150deg, rgba(111,194,174,0.7) 0%, rgba(26,25,22,0.06) 45%, rgba(111,194,174,0.25) 100%);
  --ffp-bg: radial-gradient(circle at 90% 0%, rgba(111,194,174,0.14) 0%, rgba(111,194,174,0) 45%), #ffffff;
  --ffp-border: #a9d6ca; --ffp-badge-bg: rgba(111,194,174,0.12);
  --cta-bg: radial-gradient(circle at 85% 50%, rgba(230,146,108,0.16) 0%, rgba(230,146,108,0) 45%), radial-gradient(rgba(26,25,22,0.06) 1px, transparent 1.2px), #fffaf3;
  --more-bg: radial-gradient(rgba(26,25,22,0.06) 1px, transparent 1.2px), #fffaf3;
  --shadow-lg: 0 40px 100px rgba(120,80,50,0.12); --glow-halo: 0 0 120px rgba(230,146,108,0.1);
  --footer-line: linear-gradient(90deg, #f6e6d7 0%, #e6926c 35%, #6fc2ae 65%, #f6e6d7 100%);
  --heading-font: "Fraunces", Georgia, serif; --heading-weight: 500; --heading-tracking: -0.025em;
  --em-weight: 500; --em-style: italic;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
a:hover { color: var(--text); }
svg { display: block; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--nav-active-bg); color: var(--nav-active-text); }
.skip-link:focus { left: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* skin-only elements (icons, hero art) */
.only-glow, .only-graphite, .only-ivory { display: none !important; }
[data-skin="glow"] .only-glow, [data-skin="graphite"] .only-graphite, [data-skin="ivory"] .only-ivory { display: flex !important; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--header-bg); border-bottom: 1px solid var(--border); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.header-inner { max-width: 1200px; margin: 0 auto; padding: 16px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.brand:hover { color: var(--text); }
.logo-tile { width: 42px; height: 42px; flex: none; border-radius: 12px; background: radial-gradient(circle at 50% 30%, #34333b 0%, #1c1c20 75%); border: 1px solid #3d3c44; box-shadow: inset 0 1px 0 rgba(255,255,255,0.07); display: flex; align-items: center; justify-content: center; }
.wordmark { font-family: "Sora", sans-serif; font-size: 16px; font-weight: 300; letter-spacing: 0.22em; }
.wordmark b { font-weight: 700; color: var(--accent); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--nav-bg); border: 1px solid var(--nav-border); }
.nav a { padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--nav-text); text-decoration: none; }
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { background: var(--nav-active-bg); color: var(--nav-active-text); font-weight: 600; }

/* ---------- Type ---------- */
h1, h2 { margin: 0; font-family: var(--heading-font); font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking); }
h1 em, h2 em { font-style: var(--em-style); font-weight: var(--em-weight); color: var(--accent); }
h1 { font-size: clamp(40px, 6.2vw, 66px); line-height: 1.05; }
h2 { font-size: clamp(30px, 4.2vw, 46px); line-height: 1.12; }
.lead { margin: 0; font-size: 18px; line-height: 1.7; color: var(--text-2); max-width: 540px; }
.pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-2); }
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; letter-spacing: 0.3em; color: var(--mint-text); text-transform: uppercase; }
.dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint-glow); }
.dot--clay { background: var(--accent); box-shadow: 0 0 12px var(--clay-glow); }
.dot--sm { width: 6px; height: 6px; }

/* ---------- Buttons ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 14px; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; border-radius: 999px; border: 0; font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; transition: filter .15s ease, transform .15s ease; }
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--btn-bg); color: var(--btn-text); box-shadow: var(--btn-shadow); }
.btn--primary:hover { color: var(--btn-text); }
.btn--mint { background: var(--mint-btn-bg); color: var(--mint-btn-text); box-shadow: var(--mint-btn-shadow); }
.btn--mint:hover { color: var(--mint-btn-text); }
.btn--ghost { border: 1px solid var(--border-3); background: var(--ghost-bg); color: var(--text); font-weight: 600; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--accent); text-decoration: none; }
.text-link svg { width: 16px; height: 16px; }

/* ---------- Hero ---------- */
.hero { background: var(--hero-bg); background-size: var(--hero-bg-size); }
.hero-inner { max-width: 1200px; margin: 0 auto; padding: 104px 24px 112px; display: flex; flex-wrap: wrap; align-items: center; gap: 64px; }
.hero-copy { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.hero-side { flex: 1 1 420px; min-width: 0; display: flex; justify-content: center; }
.facts { display: flex; flex-wrap: wrap; gap: 18px; }
.fact { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); }

.art-edge { width: 100%; max-width: 480px; padding: 1px; border-radius: 37px; background: var(--edge-mix); box-shadow: var(--shadow-lg), var(--glow-halo); }
.art-card { width: 100%; aspect-ratio: 1 / 1; border-radius: 36px; background: radial-gradient(circle at 50% 45%, #2e2d34 0%, #1a1a1e 75%); display: flex; align-items: center; justify-content: center; }
.art-card svg { width: 86%; height: auto; }
.art-panel { position: relative; width: 100%; max-width: 480px; aspect-ratio: 1 / 1; border-radius: 36px; background: var(--panel); display: flex; align-items: center; justify-content: center; }
.art-panel .ring { position: absolute; border-radius: 50%; border: 1.5px solid var(--panel-ring); }
.art-panel .ring--1 { inset: 8%; } .art-panel .ring--2 { inset: 20%; }
.float { position: absolute; display: flex; align-items: center; justify-content: center; }
.float--tr { top: 12%; right: 9%; } .float--bl { bottom: 11%; left: 8%; } .float--br { bottom: 15%; right: 13%; }
.logo-hero { width: 38%; aspect-ratio: 1 / 1; border-radius: 28%; background: radial-gradient(circle at 50% 30%, #34333b 0%, #1c1c20 75%); border: 1px solid #3d3c44; box-shadow: inset 0 2px 0 rgba(255,255,255,0.08), 0 30px 60px rgba(26,25,22,0.35); display: flex; align-items: center; justify-content: center; position: relative; }
.logo-hero svg { width: 70%; height: auto; }

/* ---------- Sections & cards ---------- */
.band { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section { max-width: 1200px; margin: 0 auto; padding: 100px 24px; display: flex; flex-direction: column; gap: 44px; }
.section-head { display: flex; flex-direction: column; gap: 14px; }
.section-head--center { align-items: center; text-align: center; }
.row { display: flex; flex-wrap: wrap; gap: 24px; }
.edge { padding: 1px; border-radius: 29px; background: var(--edge-clay); }
.edge--mint { background: var(--edge-mint); }
.edge--mix { background: var(--edge-mix); }
.col { flex: 1 1 280px; min-width: 0; }
.card { height: 100%; border-radius: 28px; background: var(--surface); padding: 36px; display: flex; flex-direction: column; gap: 18px; }
.card-top { display: flex; align-items: center; justify-content: space-between; }
.card-num { font-size: 13px; font-weight: 600; letter-spacing: 0.2em; color: var(--num); }
.card h3 { margin: 0; font-size: 21px; font-weight: 600; }
.card p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text-3); }

/* tiles (icons) */
.tile { flex: none; display: flex; align-items: center; justify-content: center; }
.tile--76 { width: 76px; height: 76px; border-radius: 22px; }
.tile--56 { width: 56px; height: 56px; border-radius: 16px; }
.tile--40 { width: 40px; height: 40px; border-radius: 12px; }
.t-glass { background: radial-gradient(circle at 50% 30%, #34333b 0%, #1c1c20 75%); border: 1px solid #3d3c44; box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 0 30px rgba(230,146,108,0.12); }
.t-glass--mint { box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 0 30px rgba(111,194,174,0.14); }
.t-glass--plain { box-shadow: inset 0 1px 0 rgba(255,255,255,0.07); }
.t-glass-ffp { background: radial-gradient(circle at 50% 30%, #2c3a36 0%, #1a2220 75%); border: 1px solid #3f6a60; box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 0 30px rgba(111,194,174,0.18); }
.t-flat { background: #26252b; border: 1px solid #3a3940; }
.t-clay { background: linear-gradient(160deg, #e6926c 0%, #b85a3a 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 14px 28px rgba(184,90,58,0.3); }
.t-char { background: linear-gradient(160deg, #3a3832 0%, #1a1916 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 14px 28px rgba(26,25,22,0.28); }
.t-peach { background: linear-gradient(160deg, #fbeee2 0%, #efd6bf 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 14px 28px rgba(184,90,58,0.18); }
.t-soft { background: #f1e3d3; }
.t-ffp { background: linear-gradient(160deg, #8fd6c4 0%, #1e6b5c 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 12px 26px rgba(30,107,92,0.3); }
.t-white { background: #ffffff; box-shadow: 0 12px 26px rgba(26,25,22,0.12); }
.t-ivory { background: #faf8f3; box-shadow: 0 14px 30px rgba(26,25,22,0.14); }

/* ---------- FieldFillerPro card ---------- */
.ffp-edge { flex: 2 1 580px; min-width: 0; padding: 1px; border-radius: 29px; background: var(--edge-ffp); }
.ffp { height: 100%; border-radius: 28px; background: var(--ffp-bg); padding: 44px; display: flex; flex-direction: column; gap: 26px; }
.ffp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.ffp-name { display: flex; flex-direction: column; gap: 4px; }
.ffp-name strong { font-family: "Manrope", sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.ffp-name span { font-size: 13px; color: var(--mint-text); }
.badge { margin-left: auto; padding: 7px 14px; border-radius: 999px; background: var(--ffp-badge-bg); border: 1px solid var(--ffp-border); color: var(--mint-text); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; }
.ffp p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--text-2); max-width: 600px; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.feature { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 18px; background: var(--bg); border: 1px solid var(--border); }
.feature strong { font-size: 15px; font-weight: 600; }
.feature span { font-size: 13px; line-height: 1.55; color: var(--text-3); }
.more { flex: 1 1 300px; min-width: 0; border-radius: 28px; background: var(--more-bg); background-size: var(--more-bg-size); border: 1px dashed var(--border-3); padding: 44px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.more h3 { margin: 0; font-size: 24px; font-weight: 600; }
.more p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text-3); }

/* ---------- CTA band ---------- */
.cta-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px 110px; }
.cta-edge { padding: 1px; border-radius: 33px; background: var(--edge-mix); box-shadow: var(--glow-halo); }
.cta { border-radius: 32px; background: var(--cta-bg); background-size: var(--cta-bg-size); padding: 56px 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.cta-copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.cta h2 { font-size: clamp(28px, 3.4vw, 38px); }
.cta p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--text-2); }

/* ---------- About: facts card ---------- */
.glance-edge { flex: 1 1 380px; min-width: 0; padding: 1px; border-radius: 29px; background: var(--edge-mix); box-shadow: var(--shadow-lg); }
.glance { height: 100%; border-radius: 28px; background: var(--surface); padding: 30px 34px; display: flex; flex-direction: column; }
.glance-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.glance-row:last-child { border-bottom: 0; padding-bottom: 4px; }
.glance-row span { font-size: 13px; color: var(--text-3); }
.glance-row strong, .glance-row a { font-size: 15px; font-weight: 600; }
.glance-row a { text-decoration: none; }

/* ---------- Products: form mock ---------- */
.doc-edge { width: 100%; max-width: 460px; padding: 1px; border-radius: 29px; background: var(--edge-ffp); box-shadow: var(--shadow-lg); }
.doc { border-radius: 28px; background: var(--surface); padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.doc-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.doc-title { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; }
.doc-badge { font-size: 11px; font-weight: 600; color: var(--mint-text); background: var(--ffp-badge-bg); border: 1px solid var(--ffp-border); padding: 4px 10px; border-radius: 999px; }
.doc-field { display: flex; flex-direction: column; gap: 6px; }
.doc-field span { font-size: 12px; color: var(--text-3); }
.doc-field div { border: 1px solid var(--input-border); border-radius: 10px; padding: 10px 12px; font-size: 14px; background: var(--input-bg); }
.doc-field div.active { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(111,194,174,0.15); }
.doc-pair { display: flex; gap: 12px; } .doc-pair > * { flex: 1; }
.doc-check { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
.doc-check i { width: 18px; height: 18px; border-radius: 5px; background: var(--accent); display: flex; align-items: center; justify-content: center; }
.doc-sign { border-bottom: 1.5px solid var(--text); padding: 4px 4px 8px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.step-num { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; background: var(--surface-2); border: 1px solid var(--border-3); color: var(--accent); }

/* ---------- Contact ---------- */
.info { display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); max-width: 420px; }
.info small { display: block; font-size: 12px; color: var(--text-3); }
.info strong, .info a { font-size: 16px; font-weight: 600; color: var(--text); text-decoration: none; }
.info a:hover { color: var(--accent); }
.form-edge { flex: 1 1 500px; min-width: 0; padding: 1px; border-radius: 29px; background: var(--edge-mix); box-shadow: var(--shadow-lg); }
.form { height: 100%; border-radius: 28px; background: var(--surface); padding: 40px; display: flex; flex-direction: column; gap: 22px; }
.field-row { display: flex; flex-wrap: wrap; gap: 16px; }
.field { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.field-row > .field { flex: 1 1 200px; }
.field label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.field input, .field select, .field textarea { font: inherit; font-size: 15px; padding: 14px 16px; border: 1px solid var(--input-border); border-radius: 14px; color: var(--text); background: var(--input-bg); width: 100%; }
.field textarea { resize: vertical; min-height: 150px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 3px rgba(111,194,174,0.18); }
.hp { position: absolute; left: -9999px; }
.form-note { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.6; color: var(--text-3); }
.form-status { margin: 0; font-size: 14px; font-weight: 600; min-height: 1.4em; }
.form-status.ok { color: var(--mint-text); }
.form-status.err { color: var(--accent); }

/* ---------- Prose (privacy) ---------- */
.prose { max-width: 760px; margin: 0 auto; padding: 24px 24px 100px; }
.prose h2 { font-size: 26px; margin: 40px 0 12px; }
.prose p, .prose li { font-size: 16px; line-height: 1.75; color: var(--text-2); }
.prose ul { padding-left: 20px; }
.prose .updated { font-size: 13px; color: var(--text-3); }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer); border-top: 1px solid var(--border); }
.footer-line { height: 2px; background: var(--footer-line); opacity: 0.7; }
.footer-main { max-width: 1200px; margin: 0 auto; padding: 52px 24px 40px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 28px; }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand small { display: block; font-size: 13px; color: var(--text-3); margin-top: 4px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 28px; }
.footer-nav a { color: var(--text-2); font-size: 14px; font-weight: 500; text-decoration: none; }
.footer-nav a:hover { color: var(--accent); }
.footer-bottom { max-width: 1200px; margin: 0 auto; padding: 22px 24px 34px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; font-size: 12px; color: var(--muted); }
.footer-bottom a { color: var(--text-2); text-decoration: none; }
.skin-switch { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.skin-switch button { font: inherit; font-size: 12px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-3); background: transparent; color: var(--text-2); cursor: pointer; }
.skin-switch button[aria-pressed="true"] { background: var(--nav-active-bg); color: var(--nav-active-text); border-color: var(--nav-active-bg); }

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
  .hero-inner { padding: 64px 20px 72px; gap: 44px; }
  .section { padding: 72px 20px; }
  .ffp, .more, .card, .form, .cta { padding: 28px; }
  .cta { padding: 36px 28px; }
  .header-inner { padding: 12px 16px; }
  .nav a { padding: 8px 12px; font-size: 13px; }
  .wordmark { font-size: 14px; letter-spacing: 0.18em; }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { transform: none; } }