/* FAI "see it work" module. Drops into failegal.site: inherits --paper, --ink, --oxblood, --brass,
   --rule, --display, --ui from the page, with fallbacks so it also stands alone. */
.fd{--fd-paper:var(--paper,#F4F1EB);--fd-paper2:var(--paper-2,#EDE8DF);--fd-ink:var(--ink,#151412);--fd-ink2:var(--ink-2,#3B3833);--fd-mute:var(--mute,#7A756C);--fd-rule:var(--rule,rgba(21,20,18,.12));--fd-ox:var(--oxblood,#7A2E2A);--fd-brass:var(--brass,#A8782B);--fd-navy:#1e3550;--fd-gold:#b8862b;--fd-display:var(--display,'DM Serif Display',Georgia,serif);--fd-ui:var(--ui,'Inter',system-ui,sans-serif);--fd-card:#fff;--fd-screen:#f6f4ee;
  font-family:var(--fd-ui);color:var(--fd-ink);position:relative}
.fd.dark{--fd-paper:#151412;--fd-paper2:#1d1b18;--fd-ink:#F4F1EB;--fd-ink2:#d9d3c7;--fd-mute:#a39c90;--fd-rule:rgba(244,241,235,.14);--fd-card:#201e1a;--fd-ox:#d9a85a;--fd-brass:#d9a85a}
.fd *{box-sizing:border-box}
.fd .fd-tag{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--fd-ox)}
.fd .fd-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--fd-ox)}
.fd h2.fd-h{font-family:var(--fd-display);font-weight:300;font-size:clamp(34px,5vw,62px);line-height:1;letter-spacing:-.03em;margin:0 0 16px;max-width:20ch}
.fd h2.fd-h i{font-style:italic;color:var(--fd-ox)}
.fd .fd-sub{max-width:60ch;font-size:clamp(15px,1.7vw,18px);line-height:1.65;color:var(--fd-ink2);margin:0 0 28px}

/* tabs */
.fd-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 22px;position:relative}
.fd-tab{appearance:none;border:1px solid var(--fd-rule);background:transparent;color:var(--fd-ink2);font:600 14px/1 var(--fd-ui);padding:12px 16px;border-radius:999px;cursor:pointer;display:inline-flex;gap:8px;align-items:center;transition:background .2s,color .2s,border-color .2s,transform .1s}
.fd-tab:active{transform:scale(.97)}
.fd-tab svg{width:15px;height:15px}
.fd-tab.on{background:var(--fd-ox);color:#fff;border-color:var(--fd-ox)}
.fd-tab small{font-weight:500;opacity:.7}
@media(max-width:760px){.fd-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}.fd-tabs::-webkit-scrollbar{display:none}.fd-tab{flex:0 0 auto;padding:11px 14px;font-size:13.5px}}

/* one mode = stage + points */
.fd-mode{display:none;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:34px;align-items:start}
.fd-mode.on{display:grid}
.fd.stacked .fd-mode{display:grid;margin-bottom:clamp(56px,7vw,100px)}
.fd-mode-h{grid-column:1/-1;display:none}
.fd.stacked .fd-mode-h{display:block}
.fd-mode-h h3{font-family:var(--fd-display);font-weight:300;font-size:clamp(28px,3.6vw,44px);letter-spacing:-.02em;margin:0 0 6px}
.fd-mode-h p{margin:0;color:var(--fd-mute);font-size:15.5px;max-width:60ch}
.fd-stage-wrap{position:sticky;top:76px}
@media(max-width:900px){.fd-mode{grid-template-columns:1fr;gap:12px}.fd-stage-wrap{position:sticky;top:var(--fd-top,60px);z-index:6;background:var(--fd-paper);padding:6px 0 10px;margin-inline:-16px;padding-inline:16px;border-bottom:1px solid var(--fd-rule)}}

/* the device */
.fd-dev{background:var(--fd-card);border:1px solid var(--fd-rule);border-radius:18px;overflow:hidden;box-shadow:0 40px 80px -36px rgba(21,20,18,.45),0 1px 0 rgba(255,255,255,.6) inset;transform-style:preserve-3d;will-change:transform}
.fd-bar{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--fd-rule);background:#fbfaf6;font:600 12px var(--fd-ui);color:#4b4a46}
.fd-bar i{width:9px;height:9px;border-radius:50%;background:#e5e1d8}.fd-bar i:nth-child(1){background:#f0b3ac}.fd-bar i:nth-child(2){background:#f2d38a}.fd-bar i:nth-child(3){background:#b7dcb0}
.fd-bar span{margin-left:8px;background:#f1efe8;border-radius:7px;padding:4px 10px;flex:1;font-weight:500;color:#6c6a64;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-bar b{color:var(--fd-navy);font-family:"Source Serif 4",Georgia,serif;font-weight:600}
.fd-screen{position:relative;background:var(--fd-screen);aspect-ratio:16/10.6;overflow:hidden}
@media(max-width:900px){.fd-screen{aspect-ratio:auto;height:min(52svh,480px)}}
.fd-pane{position:absolute;inset:0;opacity:0;transition:opacity .35s;pointer-events:none}
.fd-pane.on{opacity:1;pointer-events:auto}
.fd-scroll{position:absolute;inset:0;overflow:hidden}
.fd-scroll img{display:block;width:100%;height:auto;will-change:transform;transform:translateY(0)}
.fd-scroll.anim img{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.fd-fit{position:absolute;inset:0;display:grid;place-items:start center;overflow:hidden}
.fd-fit img{width:100%;height:100%;object-fit:cover;object-position:top}

/* the empty state + composer replica, drawn to match the app */
.fd-empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px 24px 120px;color:var(--fd-navy)}
.fd-empty .ico{width:44px;height:44px;border-radius:12px;border:1px solid rgba(184,134,43,.35);background:rgba(184,134,43,.1);display:grid;place-items:center;margin:0 auto 10px;color:var(--fd-gold)}
.fd-empty h4{font-family:"Source Serif 4",Georgia,serif;font-weight:600;font-size:clamp(17px,2vw,22px);margin:0;color:var(--fd-navy)}
.fd-empty p{margin:4px 0 0;font-size:12.5px;color:#6b7180}
.fd-thread{position:absolute;inset:0 0 auto;padding:16px 18px 0;display:flex;flex-direction:column;gap:12px}
.fd-bubble{align-self:flex-end;max-width:82%;background:var(--fd-navy);color:#fff;border-radius:16px;padding:10px 14px;font-size:13px;line-height:1.5;box-shadow:0 12px 26px -14px rgba(30,53,80,.6);opacity:0;translate:0 8px;transition:opacity .3s,translate .3s}
.fd-bubble.fd-x-in{opacity:1;translate:0 0}
.fd-who{display:flex;gap:8px;align-items:center;font-family:"Source Serif 4",Georgia,serif;font-weight:600;color:var(--fd-navy);font-size:13px}
.fd-who i{width:24px;height:24px;border-radius:50%;background:rgba(184,134,43,.18);display:grid;place-items:center;color:var(--fd-gold)}
.fd-chip{display:inline-flex;gap:6px;align-items:center;background:#ece7db;color:#5b5548;border-radius:999px;padding:5px 10px;font-size:11.5px;width:max-content}
.fd-chip i{width:10px;height:10px;border:1.5px solid #9a8c6f;border-top-color:transparent;border-radius:50%;animation:fdspin 1s linear infinite}
@keyframes fdspin{to{transform:rotate(360deg)}}
.fd-wait{background:#fff;border:1px solid var(--fd-rule);border-radius:14px;padding:12px 14px;box-shadow:0 20px 40px -30px rgba(30,53,80,.5)}
.fd-wait .t{display:flex;justify-content:space-between;align-items:center;gap:10px}
.fd-wait .t b{font-family:"Source Serif 4",Georgia,serif;font-size:15px;color:var(--fd-navy);display:block}
.fd-wait .t span{font-size:11.5px;color:#6b7180}
.fd-wait .t em{font-family:"Source Serif 4",Georgia,serif;font-style:normal;font-weight:600;color:var(--fd-navy);text-align:right;font-size:15px}
.fd-wait .t em small{display:block;font:400 10.5px var(--fd-ui);color:#6b7180}
.fd-wait .fd-x-bar{height:4px;background:#ece9e1;border-radius:2px;margin:10px 0 8px;overflow:hidden}
.fd-wait .fd-x-bar i{display:block;height:100%;width:0;background:var(--fd-gold);transition:width 3.2s linear}
.fd-wait p{margin:0;font-size:11px;color:#6b7180}
.fd-comp{position:absolute;left:14px;right:14px;bottom:12px;background:#fff;border:1.5px solid rgba(184,134,43,.55);border-radius:20px;padding:8px;box-shadow:0 18px 40px -20px rgba(30,53,80,.45);transition:opacity .3s,translate .3s}
.fd-comp.away{opacity:0;translate:0 14px;pointer-events:none}
.fd-comp .fd-x-row{display:flex;gap:8px;align-items:center}
.fd-comp .fd-x-plus,.fd-comp .fd-x-mic,.fd-comp .fd-x-send{width:32px;height:32px;border-radius:50%;border:1px solid var(--fd-rule);display:grid;place-items:center;color:#4b4a46;flex:none;background:#fff}
.fd-comp .fd-x-send{background:var(--fd-navy);color:#fff;border-color:var(--fd-navy);transition:transform .12s}
.fd-comp .fd-x-send.press{transform:scale(.86)}
.fd-comp .fd-x-txt{flex:1;font-size:13px;color:#1c1f26;min-height:32px;display:flex;align-items:center;padding:0 4px;line-height:1.35}
.fd-comp .fd-x-txt .fd-x-ph{color:#9aa0ab}
.fd-comp .fd-x-txt .fd-x-caret{display:inline-block;width:1.5px;height:1em;background:var(--fd-gold);vertical-align:-2px;margin-left:1px;animation:fdblink 1s steps(2) infinite}
@keyframes fdblink{50%{opacity:0}}
.fd-comp .fd-x-modes{display:flex;gap:4px;margin-top:6px;background:#f1efe8;border-radius:999px;padding:3px;width:max-content}
.fd-comp .fd-x-modes span{font:600 11.5px var(--fd-ui);color:#6b7180;padding:6px 10px;border-radius:999px;display:inline-flex;gap:5px;align-items:center}
.fd-comp .fd-x-modes span.on{background:linear-gradient(135deg,#d9a641,#b8862b);color:#fff}
.fd-comp .fd-x-modes svg{width:11px;height:11px}
.fd-ring{position:absolute;border:2px solid var(--fd-gold);border-radius:999px;box-shadow:0 0 0 6px rgba(184,134,43,.18);opacity:0;transition:opacity .3s;pointer-events:none;animation:fdring 1.6s ease-in-out infinite}
.fd-ring.on{opacity:1}
@keyframes fdring{50%{box-shadow:0 0 0 12px rgba(184,134,43,.05)}}
/* search-view replica (judgments and statutes) */
.fd-search{position:absolute;inset:0 0 auto;padding:12px 14px;background:#fff;border-bottom:1px solid var(--fd-rule);z-index:3;transition:opacity .3s,translate .3s}
.fd-search.away{opacity:0;translate:0 -10px;pointer-events:none}
.fd-search .fd-x-row{display:flex;gap:8px}
.fd-search .fd-x-in{flex:1;border:1px solid var(--fd-rule);border-radius:11px;padding:9px 12px;font-size:13px;min-height:38px;display:flex;align-items:center;color:#1c1f26}
.fd-search .fd-x-in .fd-x-ph{color:#9aa0ab}
.fd-search .fd-x-go{background:var(--fd-navy);color:#fff;border-radius:11px;padding:0 14px;font:600 12.5px var(--fd-ui);display:grid;place-items:center;transition:transform .12s}
.fd-search .fd-x-go.press{transform:scale(.92)}
.fd-search .fd-x-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px;font:500 11px var(--fd-ui);color:#4b4a46;align-items:center}
.fd-search .fd-x-chips b{font-weight:500;color:#6b7180;margin-right:2px}
.fd-search .fd-x-chips span{border:1px solid var(--fd-rule);border-radius:999px;padding:4px 9px;background:#fff}
.fd-search .fd-x-chips span.on{background:var(--fd-navy);color:#fff;border-color:var(--fd-navy)}
.fd-search .fd-x-chips span.gold{background:#d9a641;color:#1c1f26;border-color:#d9a641}
/* cursor + toast */
.fd-cur{position:absolute;width:22px;height:22px;border-radius:50%;background:rgba(30,53,80,.18);border:2px solid rgba(30,53,80,.55);pointer-events:none;opacity:0;transition:left .8s cubic-bezier(.2,.8,.2,1),top .8s cubic-bezier(.2,.8,.2,1),opacity .3s,transform .15s;z-index:8;translate:-50% -50%}
.fd-cur.on{opacity:1}.fd-cur.tap{transform:scale(.6);background:rgba(184,134,43,.5);border-color:var(--fd-gold)}
.fd-toast{position:absolute;left:50%;bottom:14px;translate:-50% 0;background:#1c1f26;color:#fff;font:600 12px var(--fd-ui);padding:9px 14px;border-radius:999px;display:flex;gap:8px;align-items:center;opacity:0;transition:opacity .3s;z-index:9;white-space:nowrap}
.fd-toast.on{opacity:1}.fd-toast i{width:16px;height:16px;border-radius:50%;background:#1b7a4a;display:grid;place-items:center;font-style:normal;font-size:10px}
.fd-cap{display:flex;gap:10px;align-items:center;margin-top:10px;font-size:13px;color:var(--fd-mute)}
.fd-cap>span:nth-child(2){flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:600px){.fd-cap .fd-x-st{display:none}}
.fd-cap b{width:24px;height:24px;border-radius:7px;background:var(--fd-ox);color:#fff;display:grid;place-items:center;font-size:11.5px;flex:none}
.fd-cap .fd-x-st{margin-left:auto;font-size:11.5px;color:#1b7a4a;font-weight:600;white-space:nowrap}
.fd-cap button{appearance:none;border:1px solid var(--fd-rule);background:transparent;color:var(--fd-ink2);font:600 12px var(--fd-ui);padding:6px 10px;border-radius:999px;cursor:pointer}

/* points */
.fd-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;counter-reset:fd}
.fd-pt{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:14px 14px 14px 12px;border-radius:14px;border:1px solid transparent;cursor:pointer;transition:background .25s,border-color .25s}
.fd-pt:hover{background:rgba(21,20,18,.03)}
.fd.dark .fd-pt:hover{background:rgba(255,255,255,.04)}
.fd-pt.on{background:var(--fd-card);border-color:var(--fd-rule);box-shadow:0 18px 40px -30px rgba(21,20,18,.5)}
.fd-pt .fd-x-n{font:600 11.5px var(--fd-ui);color:var(--fd-ox);letter-spacing:.06em;padding-top:4px}
.fd-pt h4{font-family:var(--fd-display);font-weight:400;font-size:19px;line-height:1.15;margin:0;letter-spacing:-.01em;color:var(--fd-ink)}
.fd-pt p{margin:5px 0 0;font-size:14px;line-height:1.5;color:var(--fd-mute)}
.fd-pt.on p{color:var(--fd-ink2)}
.fd-pt .fd-x-n::after{content:"";display:block;width:0;height:2px;background:var(--fd-ox);margin-top:6px;border-radius:2px;transition:width linear}
.fd-pt.on.auto .fd-x-n::after{width:22px;transition-duration:var(--dur,4.5s)}
@media(max-width:900px){.fd-points{padding-top:8px}.fd-pt{padding:12px 10px}.fd-pt h4{font-size:17.5px}.fd-pt p{font-size:13.5px}}
.fd-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.fd-btn{display:inline-flex;align-items:center;gap:10px;font:600 14.5px/1 var(--fd-ui);padding:16px 26px;border-radius:999px;background:var(--fd-ink);color:var(--fd-paper);text-decoration:none;transition:transform .1s}
.fd.dark .fd-btn{background:var(--fd-paper);color:#151412}
.fd-btn:active{transform:scale(.97)}
.fd-btn.ghost{background:transparent;color:var(--fd-ink);border:1px solid var(--fd-rule)}
.fd.dark .fd-btn.ghost{color:var(--fd-paper)}
@media(prefers-reduced-motion:reduce){.fd *{transition:none!important;animation:none!important}}

/* ===== surfaces, zoom, and the phone layout: one block per mode, swiped point cards, no autoplay ===== */
.fd{--fd-line:rgba(21,20,18,.09);--fd-sh:0 1px 2px rgba(21,20,18,.06),0 8px 24px -12px rgba(21,20,18,.25);--fd-zoom:76%}
.fd-scroll img{width:var(--fd-zoom);margin:0 auto;transform:translate3d(0,0,0);backface-visibility:hidden;contain:paint}
.fd-scroll.anim img{transition:transform .8s cubic-bezier(.22,.8,.2,1)}
.fd-badge{display:inline-flex;align-items:center;font:600 11px/1 var(--fd-ui);padding:5px 8px;border-radius:999px;background:rgba(21,20,18,.06);color:var(--fd-ink2);white-space:nowrap}
.fd-pin,.fd-nav,.fd-pt .fd-x-n small{display:none}
@media(max-width:900px){
  .fd{--fd-zoom:88%}
  .fd .fd-mode{display:block;margin-bottom:52px}
  .fd .fd-mode-h,.fd.stacked .fd-mode-h{display:none}
  .fd .fd-stage-wrap{position:static;margin:0;padding:0;background:none;border:0}
  .fd-pin{display:flex;align-items:center;gap:8px;padding:0 2px 10px;font-family:var(--fd-display);font-size:25px;letter-spacing:-.01em;color:var(--fd-ink)}
  .fd-pin .fd-pin-n{margin-left:auto;font:600 12px var(--fd-ui);color:var(--fd-mute)}.fd-pin .fd-pin-n b{color:var(--fd-ink);font-size:14px}
  .fd-pin-replay{appearance:none;border:1px solid var(--fd-line);background:#fff;width:32px;height:32px;border-radius:50%;font-size:15px;color:var(--fd-ink2);display:grid;place-items:center;box-shadow:0 1px 2px rgba(21,20,18,.05)}
  .fd .fd-cap{display:none}
  .fd .fd-dev{border-radius:22px;box-shadow:0 2px 6px rgba(21,20,18,.08),0 24px 48px -24px rgba(21,20,18,.4);border:1px solid rgba(21,20,18,.1);transform:none!important}
  .fd .fd-bar{padding:8px 12px}
  .fd .fd-screen{height:min(40svh,360px)}
  .fd .fd-points{position:relative;flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:14px 0 0;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .fd .fd-points::-webkit-scrollbar{display:none}
  .fd .fd-pt,.fd .fd-pt.on{flex:0 0 100%;scroll-snap-align:start;background:#fff;border:1px solid var(--fd-line);border-radius:18px;box-shadow:var(--fd-sh);padding:16px 18px 18px;grid-template-columns:1fr;gap:4px;min-height:132px}
  .fd .fd-pt .fd-x-n{font:600 11px var(--fd-ui);letter-spacing:.14em;color:var(--fd-ox);padding:0}.fd .fd-pt .fd-x-n small{display:inline;font-size:inherit}.fd .fd-pt .fd-x-n::after{display:none}
  .fd .fd-pt h4{font-size:20px;line-height:1.2}.fd .fd-pt p,.fd .fd-pt.on p{font-size:15px;line-height:1.55;color:var(--fd-ink2);margin-top:8px}
  .fd-nav{display:flex;align-items:center;gap:10px;padding:12px 0 0}
  .fd-nav button{appearance:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--fd-line);background:#fff;color:var(--fd-ink);font:400 26px/1 var(--fd-ui);display:grid;place-items:center;padding:0 0 3px;box-shadow:0 1px 2px rgba(21,20,18,.05);cursor:pointer}
  .fd-nav button:active{transform:scale(.94)}
  .fd-dots{flex:1;display:flex;justify-content:center;gap:6px}.fd-dots i{width:6px;height:6px;border-radius:3px;background:rgba(21,20,18,.18);transition:width .25s,background .25s}.fd-dots i.on{width:18px;background:var(--fd-ox)}
  .fd.fd-v-steps .fd-points{overflow:hidden;scroll-snap-type:none}
}