/* Self-hosted fonts (latin subset, SIL Open Font License 1.1, via Fontsource 5.3.0) */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/space-grotesk-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/space-grotesk-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/space-grotesk-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/space-grotesk-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Share Tech Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/share-tech-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/fraunces-latin-standard-normal.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:500;font-display:swap;src:url(fonts/fraunces-latin-standard-italic.woff2) format('woff2')}
@font-face{font-family:'Karla';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/karla-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Karla';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/karla-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}
/* Arial scaled to Space Grotesk's width and line metrics, so text doesn't reflow when the font arrives */
@font-face{font-family:'Space Grotesk Fallback';font-style:normal;font-weight:400 500;src:local('Arial'),local('ArialMT');size-adjust:108.7%;ascent-override:90.1%;descent-override:26.7%;line-gap-override:0%}
@font-face{font-family:'Space Grotesk Fallback';font-style:normal;font-weight:600 700;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:101%;ascent-override:97%;descent-override:28.7%;line-gap-override:0%}
body{margin:0;background:#06060E}
.gx a{color:#C4B5FD}.gx a:hover{color:#FFFFFF}
.gx a:focus-visible,.gx button:focus-visible,.gx summary:focus-visible,.gx input:focus-visible,.gx textarea:focus-visible,.gx [role="tab"]:focus-visible{outline:2px solid #C4B5FD;outline-offset:3px}
.gx-wrap{max-width:1240px;margin:0 auto;padding:0 24px;box-sizing:border-box}
.gx-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border-radius:999px;font:600 17px 'Space Grotesk', 'Space Grotesk Fallback',system-ui,sans-serif;letter-spacing:-0.01em;text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s,box-shadow .15s}
.gx .gx-btn-primary{background:#7C3AED;color:#FFFFFF;box-shadow:0 10px 30px -10px rgba(124,58,237,.8)}
.gx .gx-btn-primary:hover{background:#8B4DF5;color:#FFFFFF}
.gx .gx-btn-ghost{color:#F1F0FF;box-shadow:inset 0 0 0 1.5px #3B3560}
.gx .gx-btn-ghost:hover{box-shadow:inset 0 0 0 1.5px #F1F0FF;color:#FFFFFF}
.gx-nav a{color:#B7B3D6;text-decoration:none;padding:12px 0;font-size:15px}.gx-nav a:hover{color:#FFFFFF}
@media (max-width: 860px){.gx-nav{display:none !important}}
.gx-h2{margin:0;font-family:'Space Grotesk', 'Space Grotesk Fallback',system-ui,sans-serif;font-weight:600;font-size:clamp(38px,4.6vw,64px);line-height:1;letter-spacing:-0.035em;color:#F1F0FF}
.gx-lede{margin:0;font-size:20px;line-height:1.55;color:#B7B3D6;max-width:34ch}
/* Hero: five styles dealt like cards, the survey walk drawn beneath */
.gx-glow{position:absolute;inset:-10% -20% -10% 10%;background:radial-gradient(closest-side, rgba(124,58,237,.42), rgba(124,58,237,.12) 55%, rgba(6,6,14,0) 100%);pointer-events:none}
.gx-fanbox{position:relative;height:600px}
.gx-fan{position:absolute;left:50%;top:0;width:700px;height:600px;margin-left:-350px}
.gx-card{position:absolute;left:233px;top:40px;width:234px;height:489px;opacity:0;animation-duration:1.1s;animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-fill-mode:forwards}
.gx-float{width:100%;height:100%;animation:gx-float 9s ease-in-out infinite alternate}
@keyframes gx-float{from{transform:translateY(-6px)}to{transform:translateY(6px)}}
.gx-c-FieldGuide{animation-name:gx-deal-FieldGuide}@keyframes gx-deal-FieldGuide{from{opacity:0;transform:translate(0px,46px) rotate(0deg) scale(.86)}to{opacity:1;transform:translate(0px,0px) rotate(0deg) scale(1)}}
.gx-c-Archive{animation-name:gx-deal-Archive}@keyframes gx-deal-Archive{from{opacity:0;transform:translate(0px,46px) rotate(0deg) scale(.86)}to{opacity:1;transform:translate(-138px,28px) rotate(-8deg) scale(0.9)}}
.gx-c-Expedition{animation-name:gx-deal-Expedition}@keyframes gx-deal-Expedition{from{opacity:0;transform:translate(0px,46px) rotate(0deg) scale(.86)}to{opacity:1;transform:translate(138px,28px) rotate(8deg) scale(0.9)}}
.gx-c-Excursion{animation-name:gx-deal-Excursion}@keyframes gx-deal-Excursion{from{opacity:0;transform:translate(0px,46px) rotate(0deg) scale(.86)}to{opacity:1;transform:translate(-245px,70px) rotate(-15deg) scale(0.8)}}
.gx-c-Cinema{animation-name:gx-deal-Cinema}@keyframes gx-deal-Cinema{from{opacity:0;transform:translate(0px,46px) rotate(0deg) scale(.86)}to{opacity:1;transform:translate(245px,70px) rotate(15deg) scale(0.8)}}
.gx-phone{position:relative;box-sizing:border-box;border:8px solid #24203A;border-radius:34px;background:#24203A;overflow:hidden;box-shadow:0 0 0 1px #3B3560,0 40px 80px -30px rgba(0,0,0,.9),0 0 60px -20px rgba(124,58,237,.35)}
.gx-phone-in{position:absolute;left:0;top:0;width:390px;height:844px;transform-origin:0 0;pointer-events:none}
.gx-trace{position:absolute;left:0;top:0;width:700px;height:600px;pointer-events:none}
.gx-trace-line{stroke-dasharray:1100;stroke-dashoffset:1100;animation:gx-draw 2.6s cubic-bezier(.4,0,.2,1) 1.5s forwards}
@keyframes gx-draw{to{stroke-dashoffset:0}}
.gx-pt{opacity:0;transform-box:fill-box;transform-origin:center;animation:gx-pop .4s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes gx-pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@media (max-width: 760px){.gx-fanbox{height:380px}.gx-fan{transform:scale(.62);transform-origin:50% 0}}
/* Survey */
.gx-gt{position:relative;border-radius:36px;background:radial-gradient(120% 90% at 85% 10%, #10264A 0%, #0A1930 55%, #071225 100%);border:1px solid #1E3A63;overflow:hidden}
.gx-gt-grid{position:absolute;inset:0;background-image:linear-gradient(#11294A 1px, transparent 1px),linear-gradient(90deg,#11294A 1px, transparent 1px);background-size:32px 32px;opacity:.45;pointer-events:none}
.gx-prof{stroke-dasharray:520;stroke-dashoffset:520;animation:gx-draw 2.2s ease-out .4s forwards}
.gx-tile{padding:12px 14px;border-radius:14px;background:#0E2140;border:1px solid #1E3A63}
.gx-gtpair{display:flex;align-items:flex-end;justify-content:center}
.gx-card2{margin-left:-64px;margin-bottom:-24px;position:relative;z-index:2}
@media (max-width: 1000px){.gx-gtpair{flex-direction:column;align-items:center;gap:24px}.gx-card2{margin:0 !important}}
/* Book demo on the dark page */
.gfd-stage{position:relative;width:390px;height:700px;overflow:hidden;background:#F3EEE1;transform:scale(.76923);transform-origin:0 0;perspective:1600px;font-family:'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;color:#1E2B22;text-align:left;line-height:normal}
.gfd-stage .page{position:absolute;inset:0;visibility:visible}
.gfd-stage .page{ position:absolute; inset:0; visibility:hidden }
.gfd-stage .grain{ position:absolute; inset:0; mix-blend-mode:multiply; pointer-events:none; background-image:url("data:image/svg+xml;utf8,") }
.gfd-stage .cover{ perspective:1300px; perspective-origin:50% 45% }
.gfd-stage .cover .desk{ position:absolute; inset:0; background:radial-gradient(90% 70% at 50% 40%, #4A4237 0%, #2C2721 70%, #221E19 100%) }
.gfd-stage .cover .desk::after{ content:""; position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,") }
.gfd-stage .cover .shadowBook{ position:absolute; left:14%; right:8%; top:9%; bottom:5%; border-radius:6px; background:rgba(0,0,0,.55); filter:blur(18px); transform:translate(14px,16px) }
.gfd-stage .cover .book{ position:absolute; inset:0; transform-style:preserve-3d; transform-origin:50% 50% }
.gfd-stage .cover .spineFace{ position:absolute; top:0; height:100%; left:-42px; width:42px; transform-origin:100% 50%; transform:rotateY(-90deg); background:
linear-gradient(90deg, rgba(0,0,0,.45), rgba(220,205,240,.10) 30%, rgba(220,205,240,.16) 50%, rgba(0,0,0,.08) 70%, rgba(0,0,0,.5)),
radial-gradient(120% 60% at 50% 30%, #3E1F73, #2A1450); border-radius:10px 0 0 10px / 6px 0 0 6px }
.gfd-stage .cover .spineFace::after{ content:""; position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,") }
.gfd-stage .cover .spineFace i{ position:absolute; left:8%; right:8%; height:6px; border-radius:3px; background:linear-gradient(180deg, rgba(241,240,255,0), rgba(241,240,255,.3) 35%, rgba(20,8,40,.5) 70%, rgba(0,0,0,0)) }
.gfd-stage .cover .spineFace .word{ position:absolute; left:0; right:0; top:22%; bottom:24%; display:flex; align-items:center; justify-content:center }
.gfd-stage .cover .spineFace .word span{ writing-mode:vertical-rl; font-family:'Fraunces', Georgia, 'Times New Roman', serif; font-weight:600; font-size:19px; letter-spacing:.06em; white-space:nowrap }
.gfd-stage .cover .spineFace .pin{ position:absolute; left:0; right:0; bottom:9%; display:flex; justify-content:center }
.gfd-stage .cover .front{ position:absolute; inset:0; overflow:hidden; border-radius:3px 6px 6px 3px; transform-origin:0 50%; backface-visibility:hidden; background:
radial-gradient(70% 50% at 70% 25%, rgba(255,250,235,.35), transparent 70%),
radial-gradient(60% 45% at 35% 80%, rgba(120,95,50,.10), transparent 70%),
#E6DCC3; color:#1E2B22; box-shadow:inset 0 0 22px 2px rgba(110,85,40,.18) }
.gfd-stage .cover .weave{ position:absolute; inset:0; opacity:.6; mix-blend-mode:multiply; background-image:url("data:image/svg+xml;utf8,") }
.gfd-stage .cover .mottle{ position:absolute; inset:0; opacity:.45; mix-blend-mode:multiply; background-image:url("data:image/svg+xml;utf8,"); background-size:cover }
.gfd-stage .cover .fox{ position:absolute; inset:0; pointer-events:none; background:
radial-gradient(5px 4px at 78% 14%, rgba(140,95,40,.35), transparent),
radial-gradient(3px 3px at 83% 18%, rgba(140,95,40,.3), transparent),
radial-gradient(4px 4px at 88% 71%, rgba(140,95,40,.28), transparent),
radial-gradient(2.5px 2.5px at 62% 88%, rgba(140,95,40,.3), transparent),
radial-gradient(3px 3px at 91% 40%, rgba(140,95,40,.22), transparent) }
.gfd-stage .cover .rub{ position:absolute; inset:0; pointer-events:none; background:
radial-gradient(30px 30px at 100% 0%, rgba(150,125,85,.35), transparent 75%),
radial-gradient(36px 32px at 100% 100%, rgba(150,125,85,.42), transparent 75%),
linear-gradient(90deg, transparent 97%, rgba(150,125,85,.25)),
linear-gradient(0deg, rgba(150,125,85,.22), transparent 2.5%, transparent 97.5%, rgba(150,125,85,.2)) }
.gfd-stage .cover .stain{ position:absolute; left:60%; top:66%; width:110px; height:90px; border-radius:50%; transform:rotate(-14deg); background:radial-gradient(closest-side, rgba(120,90,40,0) 66%, rgba(120,90,40,.10) 80%, transparent 100%); mix-blend-mode:multiply }
.gfd-stage .cover .spineCloth{ position:absolute; left:0; top:0; bottom:0; width:11%; min-width:36px; background:
linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,.08) 30%, rgba(220,205,240,.10) 55%, rgba(0,0,0,.18) 92%, rgba(0,0,0,.35)),
radial-gradient(120% 60% at 50% 30%, #3E1F73, #2A1450);
box-shadow:2px 0 0 rgba(42,20,80,.35), 4px 0 8px rgba(42,20,80,.25) }
.gfd-stage .cover .spineCloth::after{ content:""; position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,") }
.gfd-stage .cover .bands{ position:absolute; left:0; width:16%; min-width:54px; top:0; bottom:0; pointer-events:none }
.gfd-stage .cover .bands i{ position:absolute; left:6%; right:10%; height:7px; border-radius:3px; background:linear-gradient(180deg, rgba(241,240,255,0), rgba(241,240,255,.28) 35%, rgba(20,8,40,.45) 70%, rgba(0,0,0,0)) }
.gfd-stage .cover .spineText{ position:absolute; left:0; width:16%; min-width:54px; top:22%; bottom:22%; display:flex; align-items:center; justify-content:center }
.gfd-stage .cover .spineText span{ writing-mode:vertical-rl; transform:rotate(180deg); font-family:'Fraunces', Georgia, 'Times New Roman', serif; font-weight:600; font-size:17px; letter-spacing:.06em; white-space:nowrap }
.gfd-stage .whiteInk{ color:#F1F0FF; text-shadow:0 1px 0 rgba(0,0,0,.35) }
.gfd-stage .cover .spineMark{ position:absolute; left:0; width:16%; min-width:54px; bottom:7%; display:flex; justify-content:center }
.gfd-stage .worn{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,") }
.gfd-stage .wornlite{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,") }
.gfd-stage .gilt{ background:linear-gradient(170deg, #E6CF8C 0%, #C9A44E 45%, #9C7A2E 70%, #E6CF8C 100%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 1px 0 rgba(0,0,0,.25) }
.gfd-stage .cover .joint{ position:absolute; top:0; bottom:0; left:calc(max(11%, 36px) + 7px); width:4px; background:linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,.04) 40%, rgba(255,250,235,.45) 70%, rgba(0,0,0,0)) }
.gfd-stage .cover .board{ position:absolute; left:max(11%, 36px); right:0; top:0; bottom:0; display:flex; flex-direction:column; align-items:center; padding:9% 9% 8% 10%; text-align:center }
.gfd-stage .cover .printed{ position:absolute; left:calc(max(11%, 36px) + 22px); right:18px; top:20px; bottom:20px; border:1px solid rgba(30,43,34,.55); outline:1px solid rgba(30,43,34,.35); outline-offset:-5px }
.gfd-stage .press{ color:#22302A; text-shadow:0 .5px 0 rgba(255,250,235,.6), 0 -.5px 0 rgba(60,45,20,.18); mix-blend-mode:multiply }
.gfd-stage .cover .kicker{ font-family:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; font-size:10.5px; letter-spacing:.34em; margin-top:8% }
.gfd-stage .cover .title{ font-family:'Fraunces', Georgia, 'Times New Roman', serif; font-weight:600; font-size:clamp(30px, 9.5vw, 40px); line-height:1; letter-spacing:-.005em; margin-top:10px; text-wrap:balance }
.gfd-stage .cover .title em{ display:block; font-style:italic; font-weight:500; font-size:.62em; margin:6px 0 }
.gfd-stage .cover .double{ width:58%; height:5px; border-top:1px solid rgba(30,43,34,.7); border-bottom:1px solid rgba(30,43,34,.7); margin:16px auto 0 }
.gfd-stage .cover .vignette{ margin-top:auto; margin-bottom:auto; opacity:.82 }
.gfd-stage .cover .ornament{ display:flex; align-items:center; gap:10px; width:46% }
.gfd-stage .cover .ornament span{ flex:1; height:1px; background:#22302A }
.gfd-stage .cover .ornament i{ width:7px; height:7px; transform:rotate(45deg); border:1px solid #22302A }
.gfd-stage .cover .facts{ display:flex; gap:14px; align-items:center; font-family:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; font-size:10px; letter-spacing:.22em }
.gfd-stage .cover .facts b{ width:4px; height:4px; border-radius:50%; background:#8A5A12 }
.gfd-stage .cover .venue{ font-family:'Fraunces', Georgia, 'Times New Roman', serif; font-style:italic; font-size:15px; margin-top:10px }
.gfd-stage .cover .no{ position:absolute; right:30px; top:34px; font-family:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; font-size:9.5px; letter-spacing:.14em; color:#8A5A12 }
.gfd-stage .endpaper{ position:absolute; inset:0; background:#E8E1F1; }
.gfd-stage .endpaper .pattern{ position:absolute; inset:0; opacity:.55; background-image:url("data:image/svg+xml;utf8,") }
.gfd-stage .plate{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scaleX(-1); width:62%; padding:18px 14px; background:#FBF8F0; border:1.5px solid #7C3AED; outline:1px solid #7C3AED; outline-offset:4px; text-align:center; color:#3E1F73 }
.gfd-stage .plate .ex{ font-family:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; font-size:10px; letter-spacing:.3em }
.gfd-stage .plate .who{ font-family:'Fraunces', Georgia, 'Times New Roman', serif; font-weight:600; font-size:20px; margin-top:6px }
.gfd-stage .plate .line{ margin:14px auto 0; width:80%; border-bottom:1px solid #3E1F73; height:16px; font-family:'Fraunces', Georgia, 'Times New Roman', serif; font-style:italic; font-size:12px; text-align:left }
.gfd-stage .home{ background:#F3EEE1; color:#1E2B22; display:flex; flex-direction:column }
.gfd-stage .home .art{ position:relative }
.gfd-stage .home .art img{ display:block; width:100%; height:auto; -webkit-mask-image:linear-gradient(#000 72%, transparent); mask-image:linear-gradient(#000 72%, transparent) }
.gfd-stage .home .body{ padding:6px 22px 22px; display:flex; flex-direction:column; gap:12px; flex:1 }
.gfd-stage .home .presents{ font-family:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; font-size:11px; letter-spacing:.16em; color:#8A5A12 }
.gfd-stage .home h2{ margin:0; font-family:'Fraunces', Georgia, 'Times New Roman', serif; font-weight:600; font-size:30px; line-height:1.05; text-wrap:balance }
.gfd-stage .home .facts{ display:grid; grid-template-columns:1fr 1fr; border:1px solid #CFC6B0; border-radius:10px; background:#FBF8F0 }
.gfd-stage .home .facts div{ padding:10px 12px; display:flex; flex-direction:column; gap:2px }
.gfd-stage .home .facts div+div{ border-left:1px solid #CFC6B0 }
.gfd-stage .home .facts span{ font-family:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; font-size:10px; letter-spacing:.12em; color:#4E5A50 }
.gfd-stage .home .facts b{ font-size:16px }
.gfd-stage .home .intro2{ margin:0; color:#4E5A50; font-size:14px; line-height:1.55 }
.gfd-stage .btn{ height:50px; border:none; border-radius:10px; background:#3C6B3F; color:#FFFFFF; font:700 16px 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif; cursor:pointer }
.gfd-stage .btn:focus-visible{ outline:3px solid #7C3AED; outline-offset:2px }
.gfd-stage .home .btn{ margin-top:auto }
.gfd-stage .mapPage{ background:#F7F2E6; display:flex; flex-direction:column }
.gfd-stage .mapPage .hdr{ height:52px; display:flex; align-items:center; gap:8px; padding:0 14px; border-bottom:1px solid #CFC6B0; color:#1E2B22; background:#F3EEE1 }
.gfd-stage .mapPage .hdr .t{ flex:1; font-family:'Fraunces', Georgia, 'Times New Roman', serif; font-weight:600; font-size:17px }
.gfd-stage .mapPage .hdr .n{ font-family:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; font-size:12px; padding:5px 9px; border:1px solid #1E2B22; border-radius:12px }
.gfd-stage .mapPage .svgbox{ flex:1; min-height:0 }
.gfd-stage .mapPage svg{ display:block; width:100%; height:100% }
.gfd-stage .mapPage .panel{ background:#FBF8F0; border-top:1px solid #CFC6B0; padding:12px 18px 16px; color:#1E2B22 }
.gfd-stage .mapPage .panel .e{ font-family:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; font-size:11px; letter-spacing:.14em; color:#8A5A12 }
.gfd-stage .mapPage .panel .r{ display:flex; justify-content:space-between; align-items:baseline }
.gfd-stage .mapPage .panel h3{ margin:4px 0 0; font-family:'Fraunces', Georgia, 'Times New Roman', serif; font-weight:600; font-size:22px }
.gfd-stage .cardPage{ background:#FBF8F0; color:#1E2B22; padding:22px 20px; display:flex; flex-direction:column; gap:10px }
.gfd-stage .cardPage .e{ font-family:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; font-size:11px; letter-spacing:.14em; color:#8A5A12 }
.gfd-stage .cardPage h2{ margin:0; font-family:'Fraunces', Georgia, 'Times New Roman', serif; font-weight:600; font-size:28px; line-height:1.05 }
.gfd-stage .cardPage .art{ border-radius:10px; overflow:hidden }
.gfd-stage .cardPage .art img{ display:block; width:100%; height:auto }
.gfd-stage .cardPage p{ margin:0; font-size:15px; line-height:1.55 }
.gfd-stage .cardPage .btn{ margin-top:auto }
.gfd-stage .cardPage .look{ margin-top:6px; padding:14px 16px; border:1.5px dashed #8A5A12; border-radius:10px; background:#F3EBD8; font-family:'Fraunces', Georgia, 'Times New Roman', serif; font-style:italic; font-size:17px; line-height:1.4; color:#1E2B22 }
.gfd-stage .cardPage .look span{ display:block; margin-bottom:6px; font-family:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; font-style:normal; font-size:11px; letter-spacing:.16em; color:#8A5A12 }
/* The Field Guide demo: the approved book (page-turn prototype v2), one 16-second loop */
.gfd-phone{position:relative;flex:none;width:318px;height:557px;box-sizing:border-box;border:9px solid #1D2A21;border-radius:42px;background:#1D2A21;box-shadow:0 30px 60px -20px rgba(30,43,34,.45),0 0 0 1px rgba(30,43,34,.08)}
.gfd-screen{position:absolute;inset:0;border-radius:33px;overflow:hidden;background:#F3EEE1}
.gfd-anim,.gfd-anim *{animation-duration:16s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}
.gfd-stage span.btn{display:flex;align-items:center;justify-content:center}
.gfd-stage .page.page{visibility:visible}
.gfd-stage .gfd2-home,.gfd-stage .gfd2-mapPage{transform-origin:0 50%;backface-visibility:hidden}
.gfd-stage .gfd2-cover{animation-name:gfd2-cover}
@keyframes gfd2-cover{0%,25%{opacity:1}25.3%,96%{opacity:0}99.5%,100%{opacity:1}}
.gfd-stage .cover .book{animation-name:gfd2-book}
@keyframes gfd2-book{0%,5%{transform:translateX(5%) scale(.78) rotateY(30deg)}6.5%{transform:translateX(4%) scale(.785) rotateY(24deg)}8%,12.5%{transform:translateX(5%) scale(.78) rotateY(30deg)}16.25%,95.9%{transform:translateX(0%) scale(1) rotateY(0deg)}96%,100%{transform:translateX(5%) scale(.78) rotateY(30deg)}}
.gfd-stage .cover .spineFace{animation-name:gfd2-spine}
@keyframes gfd2-spine{0%,12.5%{opacity:1}15%,95.9%{opacity:0}96%,100%{opacity:1}}
.gfd-stage .cover .shadowBook{animation-name:gfd2-shadow}
@keyframes gfd2-shadow{0%,12.5%{opacity:1}16.25%,95.9%{opacity:0}96%,100%{opacity:1}}
.gfd-stage .cover .desk{animation-name:gfd2-desk}
@keyframes gfd2-desk{0%,16.2%{opacity:1}16.3%,95.9%{opacity:0}96%,100%{opacity:1}}
.gfd-stage .cover .front{animation-name:gfd2-front}
@keyframes gfd2-front{0%,16.25%{transform:rotateY(0deg);filter:brightness(1)}25%,95.9%{transform:rotateY(-104deg);filter:brightness(.55)}96%,100%{transform:rotateY(0deg);filter:brightness(1)}}
.gfd-stage .gfd2-home{animation-name:gfd2-home}
@keyframes gfd2-home{0%,40%{transform:rotateY(0deg);filter:brightness(1);opacity:1}45%{transform:rotateY(-100deg);filter:brightness(.6);opacity:1}45.1%,99.6%{transform:rotateY(-100deg);opacity:0}99.7%,100%{transform:rotateY(0deg);filter:brightness(1);opacity:1}}
.gfd-stage .gfd2-press1{animation-name:gfd2-press1}
@keyframes gfd2-press1{0%,37.5%{transform:scale(1);filter:brightness(1)}38.3%{transform:scale(.96);filter:brightness(.82)}39.2%,100%{transform:scale(1);filter:brightness(1)}}
.gfd-stage .gfd2-mapPage{animation-name:gfd2-map}
@keyframes gfd2-map{0%,68.75%{transform:rotateY(0deg);filter:brightness(1);opacity:1}73.75%{transform:rotateY(-100deg);filter:brightness(.6);opacity:1}73.85%,99.6%{transform:rotateY(-100deg);opacity:0}99.7%,100%{transform:rotateY(0deg);filter:brightness(1);opacity:1}}
.gfd-stage .gfd2-dot{animation-name:gfd2-dot}
@keyframes gfd2-dot{0%,47.5%{transform:translate(-56px,88px)}65%,100%{transform:translate(0px,0px)}}
.gfd-stage .gfd2-ring{opacity:0;transform-box:fill-box;transform-origin:center;animation-name:gfd2-ring}
@keyframes gfd2-ring{0%,65%{opacity:0;transform:scale(.6)}66%{opacity:.85;transform:scale(1)}71%,100%{opacity:0;transform:scale(2.2)}}
.gfd-stage .gfd2-press2{animation-name:gfd2-press2}
@keyframes gfd2-press2{0%,91%{transform:scale(1);filter:brightness(1)}91.8%{transform:scale(.96);filter:brightness(.82)}92.6%,100%{transform:scale(1);filter:brightness(1)}}
.gfd-stage .gfd2-w0{animation-name:gfd2-w0}@keyframes gfd2-w0{0%,49.65%{opacity:0}50.05%,99.6%{opacity:1}99.7%,100%{opacity:0}}
.gfd-stage .gfd2-w1{animation-name:gfd2-w1}@keyframes gfd2-w1{0%,52.53%{opacity:0}52.93%,99.6%{opacity:1}99.7%,100%{opacity:0}}
.gfd-stage .gfd2-w2{animation-name:gfd2-w2}@keyframes gfd2-w2{0%,55.43%{opacity:0}55.83%,99.6%{opacity:1}99.7%,100%{opacity:0}}
.gfd-stage .gfd2-w3{animation-name:gfd2-w3}@keyframes gfd2-w3{0%,58.32%{opacity:0}58.72%,99.6%{opacity:1}99.7%,100%{opacity:0}}
.gfd-stage .gfd2-w4{animation-name:gfd2-w4}@keyframes gfd2-w4{0%,61.20%{opacity:0}61.60%,99.6%{opacity:1}99.7%,100%{opacity:0}}
.gfd-stage .gfd2-w5{animation-name:gfd2-w5}@keyframes gfd2-w5{0%,64.11%{opacity:0}64.51%,99.6%{opacity:1}99.7%,100%{opacity:0}}
.gfd-stage .gfd2-w6{animation-name:gfd2-w6}@keyframes gfd2-w6{0%,65.00%{opacity:0}65.40%,99.6%{opacity:1}99.7%,100%{opacity:0}}
.gfd-cap{border-left:3px solid #D9D0BC;border-radius:0 10px 10px 0;background:transparent}
.gfd-c1{animation-name:gfd-c1}.gfd-c2{animation-name:gfd-c2}.gfd-c3{animation-name:gfd-c3}
@keyframes gfd-c1{0%,39%{background:#E9E1CD;border-left-color:#7C3AED}41%,95%{background:transparent;border-left-color:#D9D0BC}97%,100%{background:#E9E1CD;border-left-color:#7C3AED}}
@keyframes gfd-c2{0%,39%{background:transparent;border-left-color:#D9D0BC}41%,68%{background:#E9E1CD;border-left-color:#7C3AED}70%,100%{background:transparent;border-left-color:#D9D0BC}}
@keyframes gfd-c3{0%,68%{background:transparent;border-left-color:#D9D0BC}70%,95%{background:#E9E1CD;border-left-color:#7C3AED}97%,100%{background:transparent;border-left-color:#D9D0BC}}
.gfd-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1.5px #1E2B22;font:600 15px Karla,system-ui,sans-serif;color:#1E2B22;cursor:pointer}
.gfd-toggle:hover{background:#1E2B22;color:#F3EEE1}
@media (prefers-reduced-motion: reduce){
.gfd-anim,.gfd-anim *{animation:none !important}
.gfd-stage .cover .book{transform:translateX(5%) scale(.78) rotateY(30deg)}
.gfd-cap{border-left-color:#7C3AED}
.gfd-toggle{display:none}
}
.gx .gfd-phone{border-color:#24203A;background:#24203A;box-shadow:0 0 0 1px #3B3560,0 40px 80px -30px rgba(0,0,0,.9)}
.gx .gfd-cap{border-left:3px solid #2B2745;background:transparent}
@keyframes gfd-c1{0%,39%{background:rgba(124,58,237,.16);border-left-color:#A78BFA}41%,95%{background:transparent;border-left-color:#2B2745}97%,100%{background:rgba(124,58,237,.16);border-left-color:#A78BFA}}
@keyframes gfd-c2{0%,39%{background:transparent;border-left-color:#2B2745}41%,68%{background:rgba(124,58,237,.16);border-left-color:#A78BFA}70%,100%{background:transparent;border-left-color:#2B2745}}
@keyframes gfd-c3{0%,68%{background:transparent;border-left-color:#2B2745}70%,95%{background:rgba(124,58,237,.16);border-left-color:#A78BFA}97%,100%{background:transparent;border-left-color:#2B2745}}
.gx .gfd-toggle,.gx .gx-pause{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1.5px #3B3560;font:500 15px 'Space Grotesk', 'Space Grotesk Fallback',system-ui,sans-serif;color:#F1F0FF;cursor:pointer}
.gx .gfd-toggle:hover,.gx .gx-pause:hover{box-shadow:inset 0 0 0 1.5px #F1F0FF}
/* Styles explorer */
.gx-tabs{display:flex;flex-wrap:wrap;gap:8px}
.gx-tab{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border-radius:999px;border:0;background:#100E1C;box-shadow:inset 0 0 0 1px #2B2745;color:#B7B3D6;font:500 16px 'Space Grotesk', 'Space Grotesk Fallback',system-ui,sans-serif;cursor:pointer}
.gx-tab:hover{color:#FFFFFF}
.gx-tab[aria-selected="true"]{background:#F1F0FF;color:#06060E;box-shadow:none}
.gx-stage{animation:gx-in .5s cubic-bezier(.2,.8,.2,1)}
@keyframes gx-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* Steps */
.gx-steps{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.gx-steps::before{content:"";position:absolute;left:22px;right:22px;top:22px;border-top:2px dashed #4C3A86}
@media (max-width: 900px){.gx-steps{grid-template-columns:minmax(0,1fr);gap:28px}.gx-steps::before{left:21px;right:auto;top:22px;bottom:22px;border-top:0;border-left:2px dashed #4C3A86}.gx-steps li{padding-left:64px !important}.gx-steps li > span:first-child{position:absolute !important;left:0;top:0}}
.gx-q summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px;padding:22px 0;font:500 21px/1.3 'Space Grotesk', 'Space Grotesk Fallback',system-ui,sans-serif;color:#F1F0FF;letter-spacing:-0.01em}
.gx-q summary::-webkit-details-marker{display:none}
.gx-q .gx-plus{flex:none;width:30px;height:30px;border-radius:999px;box-shadow:inset 0 0 0 1.5px #3B3560;display:grid;place-items:center;transition:transform .2s;color:#C4B5FD}
.gx-q[open] .gx-plus{transform:rotate(45deg)}
.gx-narrow{display:none}
@media (max-width: 640px){.gx-wide{display:none !important}.gx-narrow{display:block}}
@media (prefers-reduced-motion: reduce){
.gx-card{opacity:1;animation:none !important}.gx-c-FieldGuide{transform:translate(0px,0px) rotate(0deg) scale(1)}.gx-c-Archive{transform:translate(-138px,28px) rotate(-8deg) scale(0.9)}.gx-c-Expedition{transform:translate(138px,28px) rotate(8deg) scale(0.9)}.gx-c-Excursion{transform:translate(-245px,70px) rotate(-15deg) scale(0.8)}.gx-c-Cinema{transform:translate(245px,70px) rotate(15deg) scale(0.8)}
.gx-float,.gx-stage{animation:none}
.gx-trace-line{animation:none;stroke-dashoffset:0}
.gx-pt{animation:none;opacity:1}
.gx-prof{animation:none;stroke-dashoffset:0}
}
/* Survey phone */
.gtw-a,.gtw-a *{animation-duration:12s;animation-iteration-count:infinite;animation-timing-function:linear}
.gtw-rec{animation:gtw-blink 1.2s steps(2,start) infinite !important}
@keyframes gtw-blink{to{opacity:.25}}
.gtw-sigring{animation:gtw-sig 2s ease-out infinite !important}
@keyframes gtw-sig{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.9);opacity:0}}
.gtw-trace{stroke-dasharray:396;stroke-dashoffset:396;animation-name:gtw-trace}
@keyframes gtw-trace{0%,2%{stroke-dashoffset:396;opacity:.95}56%{stroke-dashoffset:0;opacity:.95}88%{stroke-dashoffset:0;opacity:.95}94%,100%{stroke-dashoffset:0;opacity:0}}
.gtw-dot{position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:#3DE8D0;box-shadow:0 0 0 3px #0A1930;offset-path:path("M40 362 C 70 316, 90 298, 110 280 S 150 232, 170 214 S 230 186, 250 158 S 280 102, 300 74");offset-rotate:0deg;animation-name:gtw-dot}
@keyframes gtw-dot{0%,2%{offset-distance:0%;opacity:1}56%{offset-distance:100%;opacity:1}88%{offset-distance:100%;opacity:1}94%,100%{offset-distance:100%;opacity:0}}
.gtw-acc{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(62,207,142,.14);border:1px solid #3ECF8E;box-sizing:border-box;animation:gtw-acc 1.6s ease-in-out infinite alternate !important}
@keyframes gtw-acc{from{transform:scale(.85)}to{transform:scale(1.15)}}
.gtw-m{opacity:0;transform:scale(.3)}
.gtw-s1{animation-name:gtw-s1}.gtw-j1{animation-name:gtw-j1}.gtw-s2{animation-name:gtw-s2}.gtw-j2{animation-name:gtw-j2}
@keyframes gtw-s1{0%,3%{opacity:0;transform:scale(.3)}5%{opacity:1;transform:scale(1.15)}6.5%,88%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(1)}}
@keyframes gtw-j1{0%,16.8%{opacity:0;transform:rotate(45deg) scale(.3)}18.5%{opacity:1;transform:rotate(45deg) scale(1.2)}20%,88%{opacity:1;transform:rotate(45deg) scale(1)}94%,100%{opacity:0;transform:rotate(45deg) scale(1)}}
@keyframes gtw-s2{0%,29.1%{opacity:0;transform:scale(.3)}31%{opacity:1;transform:scale(1.15)}32.5%,88%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(1)}}
@keyframes gtw-j2{0%,42.6%{opacity:0;transform:rotate(45deg) scale(.3)}44.3%{opacity:1;transform:rotate(45deg) scale(1.2)}46%,88%{opacity:1;transform:rotate(45deg) scale(1)}94%,100%{opacity:0;transform:rotate(45deg) scale(1)}}
.gtw-stop{animation-name:gtw-stop}
@keyframes gtw-stop{0%,2%{box-shadow:0 0 0 0 rgba(212,162,78,0);transform:scale(1)}3.2%{box-shadow:0 0 0 8px rgba(212,162,78,.35);transform:scale(.97)}6%{box-shadow:0 0 0 0 rgba(212,162,78,0);transform:scale(1)}28%{box-shadow:0 0 0 0 rgba(212,162,78,0);transform:scale(1)}29.3%{box-shadow:0 0 0 8px rgba(212,162,78,.35);transform:scale(.97)}32%,100%{box-shadow:0 0 0 0 rgba(212,162,78,0);transform:scale(1)}}
.gtw-jbtn{animation-name:gtw-jbtn}
@keyframes gtw-jbtn{0%,16%{background:transparent}17.3%{background:rgba(61,232,208,.22)}20%,42%{background:transparent}43.1%{background:rgba(61,232,208,.22)}46%,100%{background:transparent}}
@media (prefers-reduced-motion: reduce){
.gtw-a,.gtw-a *{animation:none !important}
.gtw-trace{stroke-dashoffset:0}
.gtw-dot{offset-distance:100%}
.gtw-m{opacity:1;transform:none}
.gtw-j1,.gtw-j2{transform:rotate(45deg)}
}
body{margin:0}
a{color:#C4B5FD;text-decoration:none}a:hover{color:#ECECF3}
/* Site additions (not in the mock) */
.gx [role="tabpanel"]:focus-visible{outline:2px solid #C4B5FD;outline-offset:3px}
.gx-tap{display:inline-block;padding:5px 0;margin:-5px 0}
.gx-doc{max-width:68ch;padding:72px 0 96px}
.gx-doc h1{margin:0 0 32px;font-weight:600;font-size:clamp(38px,4.6vw,56px);line-height:1.05;letter-spacing:-0.035em;color:#FFFFFF}
.gx-doc p{margin:0 0 20px;font-size:18px;line-height:1.65;color:#D9D6F2}
.gx-doc strong{color:#FFFFFF;font-weight:600}
.gx-doc a{text-decoration:underline;text-underline-offset:3px}
/* Pausing comes last: these tie on specificity with the survey's `animation: ... !important`
rules (REC light, signal ring, accuracy halo), so the later rule has to be this one. */
.gx-off,.gx-off *{animation-play-state:paused !important}
.gtw-paused,.gtw-paused *{animation-play-state:paused !important}
.gfd-paused,.gfd-paused *{animation-play-state:paused !important}