/* ================================================================
   exp31 — THE LIVE AUDIT
   A deliberately generic SaaS landing page, audited in front of you.
   Your cursor is the audit lens: where it moves, the marketing
   surface is cut away and the audit layer shows through.

   Layers:
     1. hud          — fixed audit status strip (blend-mode difference)
     2. .saas        — the fake product "SynergyOS": gradient, glass,
                       blobs, nine unaudited claims
     3. .claim > .t  — the truth layer under each claim, revealed by
                       clip-path circle at the pointer
     4. .tear + .proof-world — the surface rips; paper, ink, the field
   ================================================================ */

/* ---------- tokens ---------- */
:root{
  --paper:#FAF8F2; --ink:#14130F; --signal:#2337E0; --fail:#C8321E; --pass:#1F7A3A;
  --muted:#6B6860; --ink-60:rgba(20,19,15,.62); --ink-40:rgba(20,19,15,.4);
  --hair:rgba(20,19,15,.14); --bandtx:#EDE8DA;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --saas1:#312E81; --saas2:#6D28D9; --saas3:#BE185D;
  --glass:rgba(255,255,255,.1); --glass-b:rgba(255,255,255,.28);
}
@property --lr{syntax:"<length>";inherits:false;initial-value:0px;}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1.05rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
::selection{background:var(--signal);color:var(--paper);}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;}
a{color:inherit;}
img,svg{max-width:100%;}
button{font:inherit;color:inherit;}
.skip{position:absolute;left:-9999px;top:8px;z-index:60;padding:.5rem .8rem;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:.8rem;}
.skip:focus{left:8px;}

/* ---------- the living field (created by field.js) ---------- */
.field{position:absolute;top:0;left:0;width:100%;z-index:0;pointer-events:none;}
.field canvas{width:100%;height:0;image-rendering:pixelated;image-rendering:crisp-edges;pointer-events:none;}
.field .fbr,.field .sbr{position:absolute;pointer-events:none;opacity:0;}
.field .fbr{border:1px solid rgba(21,20,15,.5);transition:opacity .4s ease;}
.field .fbr.dark{border-color:rgba(237,232,218,.45);}
.field .fbr.on{opacity:1;}
.field .sbr{border:1px solid rgba(21,20,15,.22);transition:opacity 1s ease;}
.field .sbr.dark{border-color:rgba(237,232,218,.26);}
.field .sbr.on{opacity:1;}
.field .sbr .tag{position:absolute;top:-1.3rem;left:-1px;font:400 .56rem/1.4 var(--mono);letter-spacing:.08em;color:var(--ink-40);white-space:nowrap;}
.field .sbr.dark .tag{color:rgba(237,232,218,.4);}
.colony-hud{position:fixed;left:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:6;max-width:min(76vw,340px);font:500 .66rem/1.45 var(--mono);letter-spacing:.05em;color:var(--ink-60);background:#F3F0E7;border:1px solid rgba(20,19,15,.22);padding:.42rem .7rem;pointer-events:none;opacity:0;transition:opacity .45s ease;}
.colony-hud.on{opacity:1;}
.colony-hud.gone{color:var(--fail);}
@media (prefers-reduced-motion:reduce){.field .fbr,.field .sbr{display:none;}}
.qa .field .fbr,.qa .field .sbr{display:none !important;}

/* ================================================================
   1. HUD — the audit status strip
   ================================================================ */
.hud{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem clamp(1rem,3vw,2rem);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;mix-blend-mode:difference;pointer-events:none;
}
.hud a,.hud button{pointer-events:auto;}
.hud-brand{text-decoration:none;font-weight:700;}
.hud-brand em{font-style:normal;font-weight:400;opacity:.75;}
.hud-right{display:flex;align-items:center;gap:1.1rem;}
.hud-count b{font-weight:700;}
.hud-count.done{color:#FF5A3C;font-weight:700;}
.hud-reveal{background:none;border:1px solid currentColor;color:inherit;border-radius:99px;padding:.28rem .8rem;font:inherit;cursor:pointer;text-transform:uppercase;letter-spacing:.1em;}
.hud-reveal:hover{background:#fff;color:#000;}

/* the hint chip */
.hint{
  position:fixed;left:50%;bottom:calc(1.1rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  z-index:39;margin:0;padding:.5rem 1rem;border-radius:99px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(10,10,20,.55);color:#fff;border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:opacity .5s ease;white-space:nowrap;max-width:94vw;overflow:hidden;text-overflow:ellipsis;
}
.hint .touch-only{display:none;}
html.touch .hint .ptr-only{display:none;}
html.touch .hint .touch-only{display:inline;}
.hint.gone{opacity:0;pointer-events:none;}

/* ================================================================
   2. SAAS-WORLD — the deliberate cliché. Opaque, covers the field.
   ================================================================ */
.saas{
  position:relative;z-index:1;cursor:crosshair;overflow:hidden;
  background:linear-gradient(165deg,var(--saas1) 0%,var(--saas2) 46%,var(--saas3) 100%);
  background-size:200% 200%;
  animation:hueDrift 26s ease-in-out infinite alternate;
  color:#fff;
}
@keyframes hueDrift{from{background-position:0% 0%;}to{background-position:100% 100%;}}
html.audited-all .saas{filter:saturate(.32) contrast(.94);transition:filter 1.2s ease;}

.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none;}
.b1{width:44vw;height:44vw;left:-10vw;top:-8vw;background:radial-gradient(circle,#818CF8,transparent 65%);animation:float1 19s ease-in-out infinite alternate;}
.b2{width:36vw;height:36vw;right:-8vw;top:22vh;background:radial-gradient(circle,#F472B6,transparent 65%);animation:float2 23s ease-in-out infinite alternate;}
.b3{width:30vw;height:30vw;left:24vw;bottom:6vh;background:radial-gradient(circle,#22D3EE,transparent 62%);opacity:.35;animation:float1 27s ease-in-out infinite alternate-reverse;}
@keyframes float1{from{transform:translate(0,0) scale(1);}to{transform:translate(6vw,4vh) scale(1.12);}}
@keyframes float2{from{transform:translate(0,0) scale(1.05);}to{transform:translate(-5vw,-5vh) scale(.95);}}

.s-wrap{position:relative;width:100%;max-width:1120px;margin:0 auto;padding:0 clamp(1.2rem,4vw,2rem);}

/* hero */
.s-hero{padding:9.5rem 0 4.5rem;text-align:center;}
.s-badge{display:inline-block;margin:0 0 1.6rem;padding:.4rem 1.1rem;border-radius:99px;background:var(--glass);border:1px solid var(--glass-b);font-size:.82rem;font-weight:600;letter-spacing:.04em;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.s-hero h1{font-size:clamp(2.8rem,7vw,5.4rem);line-height:1.02;font-weight:800;letter-spacing:-.035em;margin:0 auto;max-width:14ch;}
.s-hero h1 em{font-style:normal;background:linear-gradient(90deg,#FDE68A,#F472B6,#818CF8);-webkit-background-clip:text;background-clip:text;color:transparent;}
.s-sub{max-width:44ch;margin:1.6rem auto 0;font-size:clamp(1.1rem,2vw,1.35rem);color:rgba(255,255,255,.85);}
.s-cta-row{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:2.4rem;}
.s-btn{display:inline-block;padding:.95rem 2.1rem;border-radius:99px;font-weight:700;font-size:1rem;text-decoration:none;background:#fff;color:#3730A3;box-shadow:0 12px 40px rgba(20,10,60,.35);}
.s-btn.ghost{background:var(--glass);color:#fff;border:1px solid var(--glass-b);box-shadow:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.s-micro{margin-top:1rem;font-size:.85rem;color:rgba(255,255,255,.65);}

/* logo soup */
.s-logos{padding:2.8rem 0 1rem;text-align:center;}
.s-logos .cap{font-family:var(--mono);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 1.4rem;}
.s-logo-row{display:flex;justify-content:center;align-items:center;gap:clamp(1.4rem,4vw,3rem);flex-wrap:wrap;}
.s-logo{font-weight:800;font-size:1.15rem;letter-spacing:-.01em;color:rgba(255,255,255,.55);font-style:normal;}
.s-logo:nth-child(2){font-family:Georgia,serif;font-weight:400;font-style:italic;}
.s-logo:nth-child(3){letter-spacing:.35em;font-size:.95rem;}
.s-logo:nth-child(4){font-family:var(--mono);font-weight:400;}
.s-logo:nth-child(5){transform:rotate(-2deg);}
.s-logo:nth-child(6){font-weight:300;letter-spacing:.2em;}

/* feature cards */
.s-feats{padding:5.5rem 0 2rem;}
.s-feats h2,.s-social h2{text-align:center;font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:800;letter-spacing:-.03em;margin:0 0 .8rem;}
.s-feats .s-sub2,.s-social .s-sub2{text-align:center;color:rgba(255,255,255,.75);margin:0 auto 3rem;max-width:52ch;}
.s-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;}
.s-card{background:var(--glass);border:1px solid var(--glass-b);border-radius:24px;padding:2rem 1.7rem;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 18px 50px rgba(15,8,50,.25);}
.s-card .ico{font-size:1.7rem;display:block;margin-bottom:1rem;}
.s-card h3{margin:0 0 .5rem;font-size:1.25rem;font-weight:700;letter-spacing:-.02em;}
.s-card p{margin:0;color:rgba(255,255,255,.78);font-size:.98rem;}

/* social proof */
.s-social{padding:5rem 0 2rem;}
.s-big-num{text-align:center;font-size:clamp(3rem,8vw,5.6rem);font-weight:800;letter-spacing:-.04em;line-height:1;margin:1rem 0 .4rem;}
.s-big-cap{text-align:center;color:rgba(255,255,255,.8);margin:0 0 3rem;font-size:1.05rem;}
.s-quote{max-width:620px;margin:0 auto;background:var(--glass);border:1px solid var(--glass-b);border-radius:24px;padding:2.2rem;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);text-align:center;}
.s-quote .stars{color:#FDE68A;letter-spacing:.3em;margin-bottom:1rem;}
.s-quote blockquote{margin:0 0 1.2rem;font-size:1.35rem;font-weight:600;letter-spacing:-.02em;line-height:1.35;}
.s-quote figcaption{font-size:.88rem;color:rgba(255,255,255,.65);font-style:italic;}

/* uptime — the one honest claim */
.s-uptime{padding:5rem 0 8rem;text-align:center;}
.s-uptime .pill{display:inline-block;background:rgba(16,185,129,.16);border:1px solid rgba(52,211,153,.5);border-radius:20px;padding:1.6rem 2.4rem;}
.s-uptime .pct{font-size:clamp(2.4rem,6vw,4rem);font-weight:800;letter-spacing:-.03em;color:#6EE7B7;}
.s-uptime p{margin:.6rem 0 0;color:rgba(255,255,255,.85);}

/* ================================================================
   3. THE CLAIMS — surface (.s) vs truth (.t) under the lens
   ================================================================ */
.claim{position:relative;}
.claim>.s{display:block;}
.claim.audited>.s .m{text-decoration:line-through;text-decoration-color:#FF6B57;text-decoration-thickness:3px;}

.claim>.t{
  position:absolute;inset:-16px;z-index:5;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--ink);border-radius:14px;
  box-shadow:0 14px 44px rgba(10,8,30,.35);
  padding:1rem 1.2rem;text-align:center;
  clip-path:circle(var(--lr,0px) at var(--lx,50%) var(--ly,50%));
}
.t-note{font-family:var(--mono);font-weight:400;letter-spacing:normal;font-size:.82rem;line-height:1.5;color:var(--ink-60);max-width:40ch;}
.t-fix{font-family:var(--mono);font-weight:500;letter-spacing:normal;font-size:.8rem;line-height:1.55;color:var(--signal);max-width:46ch;}
.claim.open>.t,html.reveal-all .claim>.t,html.qa .claim>.t,.claim:focus-within>.t{clip-path:none;}
html.reveal-all,html.qa{cursor:auto;}

.stamp{
  display:inline-block;font-family:var(--mono);font-weight:700;font-size:.8rem;letter-spacing:.18em;
  color:var(--fail);border:2.5px solid var(--fail);border-radius:6px;padding:.22rem .7rem;
  transform:rotate(-5deg);text-transform:uppercase;background:rgba(200,50,30,.05);
}
.stamp.pass{color:var(--pass);border-color:var(--pass);background:rgba(31,122,58,.06);transform:rotate(3deg);}
.claim.audited .stamp{animation:stampIn .4s cubic-bezier(.2,1.6,.4,1);}
@keyframes stampIn{from{transform:rotate(-5deg) scale(1.9);opacity:0;}to{transform:rotate(-5deg) scale(1);opacity:1;}}
.stamp.pass{animation-name:stampInP;}
@keyframes stampInP{from{transform:rotate(3deg) scale(1.9);opacity:0;}to{transform:rotate(3deg) scale(1);opacity:1;}}

/* claim block spacing inside saas world */
.claim-block{margin:0 auto;}

/* ================================================================
   4. THE LENS RING — fixed crosshair that follows the pointer
   ================================================================ */
.lensring{
  position:fixed;left:0;top:0;z-index:38;width:340px;height:340px;
  border:1.5px solid rgba(255,255,255,.9);border-radius:50%;
  pointer-events:none;transform:translate(-50%,-50%);
  opacity:0;transition:opacity .3s ease;
  mix-blend-mode:difference;
}
.lensring::before,.lensring::after{content:"";position:absolute;background:rgba(255,255,255,.9);}
.lensring::before{left:50%;top:-9px;width:1px;height:18px;}
.lensring::after{top:50%;left:-9px;height:1px;width:18px;}
.lensring.on{opacity:1;}
.lensring .ro{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
  font:600 .62rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:#fff;white-space:nowrap;
}
html.touch .lensring,html.reveal-all .lensring,html.qa .lensring{display:none;}

/* ================================================================
   5. THE TEAR + PROOF WORLD — paper, ink, the field
   ================================================================ */
.tear{position:relative;z-index:2;height:0;}
.proof-world{
  position:relative;z-index:1;
  clip-path:polygon(0 26px,3% 8px,7% 22px,12% 4px,17% 20px,23% 10px,28% 24px,34% 6px,39% 18px,45% 2px,50% 22px,56% 8px,61% 24px,67% 4px,72% 18px,78% 10px,83% 26px,89% 6px,94% 20px,97% 8px,100% 18px,100% 100%,0 100%);
  margin-top:-26px;padding-top:5rem;
}
.pw-wrap{width:100%;max-width:880px;margin:0 auto;padding:0 clamp(1.2rem,4vw,2rem);}
.pw-sec{padding:4.5rem 0;}
.pw-sec + .pw-sec{border-top:1px solid var(--hair);}
.kicker{display:flex;align-items:center;gap:.6rem;margin:0 0 1rem;font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.kicker::before{content:"";width:7px;height:7px;background:var(--signal);flex:0 0 auto;}
.proof-world h2{font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.08;letter-spacing:-.03em;font-weight:650;margin:0 0 1.2rem;}
.proof-world h2 b{color:var(--fail);font-weight:650;}
.proof-world .lead{font-size:1.12rem;line-height:1.65;color:var(--ink-60);max-width:62ch;margin:0;}
.proof-world .lead b{color:var(--ink);font-weight:600;}

/* facts */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem;margin-top:2.6rem;border-top:1px solid var(--ink);padding-top:1.8rem;}
.fact-n{display:block;font-size:clamp(2rem,4.4vw,3rem);font-weight:650;letter-spacing:-.03em;line-height:1;}
.fact p{margin:.5rem 0 0;font-size:.88rem;color:var(--muted);line-height:1.5;}

/* evidence: finding card + cli */
.evi{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:2rem;align-items:start;margin-top:2.2rem;}
.fcard{border:1px solid var(--ink);border-radius:10px;overflow:hidden;background:#fff;}
.fcard-h{display:flex;justify-content:space-between;align-items:center;padding:.55rem .9rem;border-bottom:1px solid var(--hair);font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.fcard-h .ex{color:var(--fail);border:1.5px solid var(--fail);border-radius:4px;padding:.05rem .4rem;font-weight:700;}
.frow{display:flex;justify-content:space-between;gap:1rem;padding:.6rem .9rem;border-bottom:1px solid var(--hair);font-family:var(--mono);font-size:.78rem;}
.frow:last-child{border-bottom:0;}
.frow .v-fail{color:var(--fail);font-weight:700;white-space:nowrap;}
.frow .v-pass{color:var(--pass);white-space:nowrap;}
.frow .more{color:var(--muted);}
.fcard-f{padding:.5rem .9rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--muted);border-top:1px solid var(--hair);display:flex;justify-content:space-between;}
.fcard-f b{color:var(--fail);}
.evi-r .cmd{display:block;padding:.7rem .9rem;background:var(--ink);color:var(--bandtx);border-radius:8px;font-family:var(--mono);font-size:.8rem;overflow-x:auto;white-space:nowrap;}
.evi-r .cmd .c{color:#8D9BFF;}
.evi-r .res{font-family:var(--mono);font-size:.76rem;line-height:1.7;color:var(--ink-60);margin:.8rem 0 0;}
.evi-r .res b{color:var(--ink);}
.evi-r p.plain{font-size:.95rem;color:var(--ink-60);margin:1.2rem 0 0;}

/* the dark band */
.band{position:relative;background:#14120C;color:var(--bandtx);padding:4.5rem 0;}
html.world .band{background:transparent;}
.band .kicker{color:rgba(237,232,218,.6);}
.band h2{color:var(--bandtx);}
.band .lead{color:rgba(237,232,218,.85);}
.band .miss{border:1px solid rgba(237,232,218,.25);border-radius:10px;margin-top:2rem;background:rgba(237,232,218,.04);}
.band .miss-h{display:flex;justify-content:space-between;padding:.55rem .9rem;border-bottom:1px solid rgba(237,232,218,.18);font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(237,232,218,.6);}
.band .miss-h .ex{color:#FF7A5C;border:1.5px solid #FF7A5C;border-radius:4px;padding:.05rem .4rem;font-weight:700;}
.band .miss-b{padding:1.1rem .9rem;font-size:.95rem;line-height:1.6;color:rgba(237,232,218,.9);}
.band .miss-b p{margin:0 0 .8rem;}
.band .miss-b p:last-child{margin:0;}
.band .miss-f{padding:.5rem .9rem;border-top:1px solid rgba(237,232,218,.18);font-family:var(--mono);font-size:.68rem;color:rgba(237,232,218,.55);display:flex;justify-content:space-between;}
.band .miss-f .ok{color:#7BC98B;}

/* cta */
.pw-cta{text-align:left;}
.cta-row{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem;}
.cta{display:inline-block;padding:.9rem 1.7rem;border-radius:8px;font-weight:600;font-size:1rem;text-decoration:none;background:var(--ink);color:var(--paper);}
.cta:hover{background:var(--signal);}
.cta-q{display:inline-block;padding:.9rem 1.7rem;border-radius:8px;font-weight:600;font-size:1rem;text-decoration:none;border:1px solid var(--ink);color:var(--ink);}
.cta-q:hover{border-color:var(--signal);color:var(--signal);}
.fine{font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.04em;margin-top:1.4rem;}

/* colophon */
.colophon{padding:3rem 0 4rem;}
.tb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--ink);}
.tb-cell{padding:.9rem 1rem;border-left:1px solid var(--ink);}
.tb-cell:first-child{border-left:0;}
.tb-k{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.tb-v{display:block;font-size:.92rem;font-weight:600;margin:.2rem 0;}
.tb-s{display:block;font-family:var(--mono);font-size:.64rem;color:var(--muted);}
.tb-sig svg{width:150px;height:48px;display:block;}
.tb-sig path{stroke:var(--ink);fill:none;stroke-width:1.7;stroke-linecap:round;}
.sheet-row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:1rem;}

/* reveal mechanics (proof world only; saas world is always instant) */
.js .rvl{opacity:0;transform:translateY(8px);transition:opacity .5s ease-out,transform .5s ease-out;transition-delay:var(--rd,0s);}
.js .rvl.inview{opacity:1;transform:none;}
html.qa .rvl,html.reduced .rvl{opacity:1 !important;transform:none !important;transition:none !important;}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .s-cards{grid-template-columns:1fr;}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));}
  .evi{grid-template-columns:1fr;}
  .tb{grid-template-columns:1fr;}
  .tb-cell{border-left:0;border-top:1px solid var(--ink);}
  .tb-cell:first-child{border-top:0;}
  .hud{font-size:.62rem;}
  .s-hero{padding-top:7.5rem;}
}
@media (prefers-reduced-motion:reduce){
  .saas{animation:none;}
  .blob{animation:none;}
  .claim>.t{transition:none;}
  .claim.audited .stamp{animation:none;}
}