/* =========================================================================
   ID Theory — idtheory.io
   Self-contained. No build step, no framework, no external requests.
   ========================================================================= */

/* ---------- Fonts (self-hosted, latin subset) ---------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;
  src:url("fonts/archivo-500.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/plexmono-400.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/plexmono-500.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/plexmono-600.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 700;font-display:swap;
  src:url("fonts/sourceserif-roman.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:200 700;font-display:swap;
  src:url("fonts/sourceserif-italic.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- Tokens ---------- */
:root{
  --bg:#101418;
  --cream:#d1cec8;
  --body:#b6babe;
  --muted:#8d9298;
  --dim:#5C646D;
  --nav:#a8acb1;
  --defi:#6f7498;
  --desci:#849ba0;
  --deai:#a7745e;
  --deai-hi:#ae7e67;
  --rule:rgba(209,206,200,.1);
  --rule-2:rgba(209,206,200,.14);
  --rule-3:rgba(209,206,200,.08);
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--cream);font-family:var(--serif);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit}
img{max-width:100%}
::selection{background:var(--deai);color:var(--bg)}
:focus-visible{outline:2px solid var(--deai);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--deai);color:var(--bg);
  font:600 12px/1 var(--mono);padding:12px 18px;z-index:100}
.skip:focus{left:12px;top:12px}

.root{min-height:100vh;min-width:1240px}
.pad{max-width:1400px;margin:0 auto;padding:0 72px;width:100%}
.screen{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:100px 0}

.kicker{display:flex;align-items:baseline;gap:13px;margin:0 0 36px}
.kicker .n{font:500 12px/1 var(--mono);letter-spacing:.08em;color:var(--dim)}
.kicker .t{font:400 12px/1 var(--mono);letter-spacing:.14em;color:var(--muted);text-transform:uppercase}

@keyframes idtRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Nav ---------- */
.logo-fly{position:fixed;top:0;left:0;z-index:45;display:flex;align-items:center;gap:38.5px;
  text-decoration:none;color:var(--cream);visibility:hidden;transform-origin:0 0;will-change:transform}
.logo-fly img{height:121px;width:auto;display:block}
.logo-fly span{font:500 44px/1 Archivo,sans-serif;letter-spacing:.22em}

.navbar{position:sticky;top:0;z-index:40;background:rgba(16,20,24,0);border-bottom:1px solid rgba(209,206,200,0)}
.nav-in{max-width:1400px;margin:0 auto;padding:20px 72px;display:flex;align-items:center;
  justify-content:space-between;gap:24px}
.nav-logo{display:flex;align-items:center;gap:14px;text-decoration:none;opacity:0;pointer-events:none}
.nav-logo img{height:44px;width:auto;display:block}
.nav-logo span{font:500 16px/1 Archivo,sans-serif;letter-spacing:.22em}
.nav-right{display:flex;align-items:center;gap:26px;font:400 12.5px/1 var(--mono);color:var(--nav)}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--cream)}
.cta{background:var(--deai);color:var(--bg);text-decoration:none;font-weight:600;transition:background .2s}
.cta:hover{background:var(--deai-hi);color:var(--bg)}
.nav-cta{padding:13px 20px}

/* ---------- Hero ---------- */
.hero .pad{display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:104px;align-items:start}
.hero-logo{display:inline-flex;align-items:center;gap:38.5px;text-decoration:none;color:var(--cream);
  margin:0 0 52px;animation:idtRise .7s cubic-bezier(.25,.6,.2,1) 0s both}
.hero-logo img{height:121px;width:auto;display:block}
.hero-logo span{font:500 44px/1 Archivo,sans-serif;letter-spacing:.22em}
.hero-eyebrow{font:400 12px/1.6 var(--mono);letter-spacing:.08em;color:var(--dim);margin:0 0 32px;
  animation:idtRise .7s cubic-bezier(.25,.6,.2,1) .12s both}
.hero h1{margin:0;font:300 64px/1.12 var(--serif);letter-spacing:-.01em;
  animation:idtRise .7s cubic-bezier(.25,.6,.2,1) .2s both}
.hero h1 em{font-style:italic;font-weight:400}
.hero-lede{margin:30px 0 0;font:300 19px/1.65 var(--serif);color:var(--muted);max-width:600px;
  animation:idtRise .7s cubic-bezier(.25,.6,.2,1) .3s both}
.dates{margin-top:173px}
.date-row{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:22px 0;
  border-top:1px solid var(--rule-2)}
.date-row:last-of-type{border-bottom:1px solid var(--rule-2)}
.date-row .lbl{display:flex;flex-direction:column;gap:9px}
.date-row .lbl b{font:500 11.5px/1 var(--mono);letter-spacing:.1em;font-weight:500}
.date-row .lbl s{font:400 10.5px/1 var(--mono);color:var(--dim);text-decoration:none}
.date-row .yr{font:300 66px/1 var(--serif);letter-spacing:-.02em}
.dates-note{font:400 10.5px/1.7 var(--mono);color:var(--dim);margin:18px 0 0;letter-spacing:.06em}
.r1{animation:idtRise .8s cubic-bezier(.25,.6,.2,1) .46s both}
.r2{animation:idtRise .8s cubic-bezier(.25,.6,.2,1) .58s both}
.r3{animation:idtRise .8s cubic-bezier(.25,.6,.2,1) .7s both}
.r4{animation:idtRise .8s cubic-bezier(.25,.6,.2,1) .86s both}

/* ---------- Focus (pinned) ---------- */
.pin{position:relative;height:250vh}
.focus{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:100px 0}
.dots{margin-left:26px;align-self:center;display:flex;align-items:center}
.dots a{display:block;padding:5px;line-height:0}
.dots i{display:block;width:7px;height:7px;border-radius:50%;border:1px solid rgba(209,206,200,.3);
  transition:border-color .2s,background .2s}
.dots a:hover i{border-color:rgba(209,206,200,.6)}
.dots .bar{display:block;width:40px;height:1px;background:rgba(209,206,200,.13)}
.dots i.on-defi{background:var(--defi);border-color:transparent;box-shadow:0 0 0 3px rgba(111,116,152,.16)}
.dots i.on-desci{background:var(--desci);border-color:transparent;box-shadow:0 0 0 3px rgba(132,155,160,.16)}
.dots i.on-deai{background:var(--deai);border-color:transparent;box-shadow:0 0 0 3px rgba(167,116,94,.16)}
.dots i.past-defi{background:rgba(111,116,152,.55);border-color:transparent}
.dots a:hover i.past-defi{background:rgba(111,116,152,.9)}
.dots i.past-desci{background:rgba(132,155,160,.55);border-color:transparent}
.dots a:hover i.past-desci{background:rgba(132,155,160,.9)}

.fwrap{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:480px}
.ftag{position:relative;z-index:1;font:500 11px/1 var(--mono);letter-spacing:.16em;margin:0 0 12px}
.ftitle{position:relative;z-index:1;max-width:580px;font:400 38px/1.15 var(--serif)}
.stage{position:relative;z-index:1;max-width:580px}
.copycol{will-change:transform}
.copycol p{margin:16px 0 0;font:400 16.5px/1.72 var(--serif);color:var(--muted)}
.copycol p:first-child{margin:24px 0 0;font:400 19px/1.6 var(--serif);color:var(--body)}
.fig{position:absolute;right:-48px;top:50%;transform:translateY(-50%);width:1040px;height:452px;pointer-events:none}
.fig canvas{width:100%;height:100%;display:block}
.bullets{position:relative;z-index:1;margin:6px 0 0;padding:26px 0 0;border-top:1px solid var(--rule)}
.ticks{display:flex;align-items:center;gap:10px}
.ticks button{all:unset;cursor:pointer;padding:6px 0;display:block;flex:none}
.ticks span{display:block;width:34px;height:2px;background:rgba(209,206,200,.13);position:relative;overflow:hidden}
.ticks span i{position:absolute;top:0;left:0;bottom:0;width:0;display:block}
.cyc{position:relative;min-height:72px;margin-top:18px;overflow:hidden}
.cyc p{margin:0;position:absolute;top:0;left:0;right:0;font:300 24px/1.45 var(--serif);
  letter-spacing:-.005em;text-wrap:pretty;opacity:0;will-change:transform,opacity}

.defi{color:var(--defi)} .desci{color:var(--desci)} .deai{color:var(--deai)}

/* ---------- Convergence ---------- */
.conv{border-left:2px solid var(--deai);padding-left:38px;max-width:1120px}
.conv .h{font:300 52px/1.12 var(--serif);color:var(--cream);letter-spacing:-.01em}
.conv p{margin:28px 0 0;font:400 22px/1.6 var(--serif);color:var(--muted);max-width:62ch}
.conv p+p{margin:24px 0 0;font:italic 300 32px/1.3 var(--serif);color:var(--cream)}

.receipts{margin-top:82px;border-top:1px solid var(--rule-2)}
.rc-head,.rc-row{display:grid;grid-template-columns:190px minmax(0,1fr) minmax(0,1.15fr);gap:40px;
  padding:20px 0;border-bottom:1px solid var(--rule-3)}
.rc-head{padding:16px 0;font:500 10.5px/1 var(--mono);letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.rc-row .v{font:400 15px/1.4 var(--serif);color:var(--cream)}
.rc-row .a{font:400 15px/1.62 var(--serif);color:var(--muted)}
.rc-row .b{font:400 15px/1.62 var(--serif);color:var(--body)}
.rc-row .src{display:block;margin-top:8px;font:400 10.5px/1.5 var(--mono);color:var(--dim);letter-spacing:.04em}
.rc-foot{margin:26px 0 0;font:400 17px/1.6 var(--serif);color:var(--muted);max-width:78ch}

/* ---------- Publications ---------- */
.pubs{justify-content:flex-start}
.pub-intro{margin:0 0 44px;font:300 20px/1.4 var(--serif);letter-spacing:-.01em;white-space:nowrap}
.pub-list{display:flex;flex-direction:column}
.pub{display:grid;grid-template-columns:112px 1fr 150px;gap:28px;align-items:baseline;
  padding:19px 12px;margin:0 -12px;border-top:1px solid var(--rule-3);text-decoration:none;transition:background .2s}
.pub:last-child{border-bottom:1px solid var(--rule-3)}
.pub:hover{background:rgba(209,206,200,.04)}
.pub .d{font:400 12px/1 var(--mono);color:var(--dim)}
.pub .t{font:400 20px/1.35 var(--serif);color:var(--cream)}
.pub .g{display:flex;justify-content:flex-end;gap:10px;font:400 11px/1 var(--mono)}
.archive{display:inline-block;margin:32px 0 0;font:500 12px/1 var(--mono);color:var(--deai);
  text-decoration:none;letter-spacing:.06em}
.archive:hover{text-decoration:underline;color:var(--deai)}

/* ---------- Founders ---------- */
.founders-lede{margin:0;font:300 26px/1.5 var(--serif);color:var(--cream);letter-spacing:-.005em}
.founders-sub{margin:24px 0 0;font:400 19px/1.6 var(--serif);color:var(--muted)}
.built{margin-top:56px;padding-top:46px;border-top:1px solid var(--rule)}
.built-h{font:500 11px/1 var(--mono);letter-spacing:.16em;color:var(--dim);text-transform:uppercase;margin:0 0 28px}
.built-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.built-grid p{margin:0;font:400 16px/1.75 var(--serif);color:var(--muted)}
.built-grid b{color:var(--cream);font-weight:400}
.built-grid .sig{color:var(--cream);font-style:italic;display:block;margin-top:1.75em}

.ppl-quote{margin:0 0 52px;padding:0 0 0 34px;border-left:2px solid var(--deai);
  font:italic 300 34px/1.42 var(--serif);color:var(--cream);text-wrap:balance}
.ppl-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.ppl{padding-top:20px}
.ppl.a{border-top:2px solid var(--defi)}
.ppl.b{border-top:2px solid var(--desci)}
.ppl .role{font:500 11px/1 var(--mono);letter-spacing:.14em;margin:0 0 16px}
.ppl p{margin:0;font:400 17.5px/1.68 var(--serif);color:var(--body)}
.qa{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border-top:1px solid var(--rule-2)}
.qa>div{padding:28px 28px 0 28px;border-left:1px solid var(--rule)}
.qa>div:first-child{padding-left:0;border-left:none}
.qa>div:last-child{padding-right:0}
.qa .q{font:400 21px/1.25 var(--serif);color:var(--cream)}
.qa p{margin:13px 0 0;font:400 14.5px/1.62 var(--serif);color:var(--muted)}

/* ---------- Contact ---------- */
.contact{min-height:100vh;display:flex;flex-direction:column;padding:100px 0 0}
.contact-body{flex:1;display:flex;align-items:center;width:100%;padding-bottom:64px}
.contact-top{display:flex;align-items:flex-start;justify-content:space-between;gap:64px;flex-wrap:wrap}
.contact-h{font:300 44px/1.2 var(--serif)}
.contact-mail{font:400 12px/1.7 var(--mono);color:var(--dim);margin:18px 0 0}
.contact-mail a{color:var(--nav);text-decoration:underline;text-underline-offset:4px;transition:color .2s}
.contact-mail a:hover{color:var(--cream)}
.contact-cols{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:56px;margin-top:54px;
  padding-top:38px;border-top:1px solid var(--rule)}
.contact-cols .l{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.contact-cols .l.muted{color:var(--dim)}
.fit-col ul{margin:16px 0 0;padding:0;list-style:none}
.fit-col li{margin:0;padding:11px 0;border-top:1px solid var(--rule-3);
  font:400 15px/1.6 var(--serif);color:var(--muted)}
.contact-note{margin:40px 0 0;font:400 14.5px/1.7 var(--serif);color:var(--muted);max-width:104ch}
.call{margin:0;max-width:none}
.call ol{margin:18px 0 0;padding:0;list-style:none;counter-reset:c}
.call li{counter-increment:c;display:grid;grid-template-columns:38px 1fr;gap:16px;padding:13px 0;
  border-top:1px solid var(--rule-3);font:400 16px/1.55 var(--serif);color:var(--muted)}
.call li::before{content:"0" counter(c);font:400 12px/1.9 var(--mono);color:var(--dim)}
.contact-cta{flex:none;font:600 13px/1 var(--mono);padding:19px 30px;text-decoration:none;margin-top:8px}

footer{border-top:1px solid var(--rule)}
.foot-legal{max-width:1400px;margin:0 auto;padding:36px 72px 8px}
.foot-legal p{margin:0 0 12px;font:400 11.5px/1.75 var(--mono);color:var(--dim);max-width:120ch;letter-spacing:.01em}
.foot-bar{max-width:1400px;margin:0 auto;padding:16px 72px 22px;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font:400 10.5px/1.6 var(--mono);color:var(--dim)}

/* ---------- Reveal ---------- */
[data-rv]{will-change:opacity,transform}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;
    animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0ms!important}
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:979.98px),(max-width:1239.98px) and (orientation:portrait){
  .root{min-width:0}
  .logo-fly{display:none}
  .nav-in{padding:13px 20px}
  .nav-cta{padding:11px 15px;font-size:11.5px}
  .nav-logo img{height:34px}
  .nav-logo span{font-size:13.5px}
  .pad{padding-left:24px;padding-right:24px}
  .hero{padding:92px 0 56px}
  .hero .pad{grid-template-columns:1fr;gap:72px}
  .hero-logo{gap:19px;margin:0 0 42px}
  .hero-logo img{height:64px}
  .hero-logo span{font-size:23px}
  .hero h1{font-size:clamp(33px,6.2vw,52px)}
  .hero-lede{font-size:16.5px;margin-top:22px}
  .dates{margin-top:0;max-width:560px}
  .date-row .yr{font-size:clamp(42px,7.4vw,56px)}
  .m-hide{display:none}

  .focus{height:100vh;height:100svh;padding:0}
  .focus>.pad{height:100%;display:flex;flex-direction:column;padding:82px 24px 20px;overflow:hidden}
  .kicker{margin:0 0 12px;flex:none}
  .fwrap{min-height:0;flex:1 1 auto;justify-content:flex-start;overflow:hidden}
  .ftag{order:0;flex:none;margin:0 0 8px}
  .ftitle{font-size:27px;max-width:none;flex:none;order:0}
  .fig{position:static;transform:none;order:1;flex:none;width:100%;height:auto;aspect-ratio:2.3;margin:10px 0 0}
  .stage{order:2;max-width:none;flex:1 1 auto;min-height:0;overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26px);
    mask-image:linear-gradient(to bottom,transparent 0,#000 26px)}
  .copycol{padding-top:26px}
  .copycol p{font-size:15px;line-height:1.6;margin:12px 0 0}
  .copycol p:first-child{font-size:16px;margin:0}
  .bullets{margin:8px 0 0;padding:14px 0 0;flex:none}
  .cyc{min-height:114px}
  .cyc p{font-size:19px}

  .conv{padding-left:20px}
  .conv .h{font-size:clamp(29px,5.4vw,42px)}
  .conv p{font-size:17px;margin-top:20px}
  .conv p+p{font-size:clamp(21px,4.4vw,27px)}
  .receipts{margin-top:48px}
  .rc-head{display:none}
  .rc-row{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .rc-row .v{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
  .rc-foot{font-size:16px}

  .pub-intro{white-space:normal;font-size:17px;margin-bottom:36px}
  .pub{grid-template-columns:1fr auto;gap:7px 16px;padding:15px 4px;margin:0 -4px}
  .pub .d{grid-row:1;grid-column:1}
  .pub .t{grid-row:2;grid-column:1/-1;font-size:17px}
  .pub .g{grid-row:1;grid-column:2}

  .founders-lede{font-size:19px}
  .founders-sub{font-size:16px}
  .built-grid{grid-template-columns:1fr;gap:26px}
  .built-grid p{font-size:15px}
  .ppl-quote{font-size:clamp(21px,4.4vw,26px);padding-left:20px;margin-bottom:38px}
  .ppl-grid{grid-template-columns:1fr;gap:34px}
  .qa{grid-template-columns:1fr;margin-top:40px}
  .qa>div{border-left:none;padding:20px 0 2px}
  .qa>div+div{border-top:1px solid var(--rule)}

  .contact-h{font-size:clamp(28px,5.6vw,38px)}
  .contact-top{gap:34px}
  .contact-cols{grid-template-columns:1fr;gap:30px;margin-top:38px;padding-top:28px}
  .call li{font-size:15px}
  .fit-col li{font-size:15px}
  .contact-note{font-size:14px;margin-top:30px}
  .contact-cta{padding:16px 22px}
  .foot-legal{padding:28px 24px 4px}
  .foot-legal p{font-size:11px}
  .foot-bar{flex-direction:column;gap:6px;padding:12px 24px 22px}
}

@media (max-width:767.98px){
  .nav-links{display:none}
}

@media (min-width:768px) and (max-width:1239.98px) and (orientation:portrait){
  .nav-in{padding:15px 28px}
  .nav-links{gap:20px}
  .hero-logo{gap:26px}
  .hero-logo img{height:84px}
  .hero-logo span{font-size:30px}
  .fig{width:min(100%,88svh)}
}

@media (min-width:980px) and (max-height:900px){
  .nav-in{padding:14px 72px}
  .focus{padding:78px 0 36px}
  .fwrap{min-height:340px}
}

@media (min-width:980px) and (max-width:1239.98px) and (orientation:landscape){
  .root{min-width:0}
  .hero .pad{grid-template-columns:minmax(0,1fr) 400px;gap:72px}
  .hero h1{font-size:clamp(46px,5.4vw,64px)}
  .dates{margin-top:120px}
  .fig{width:calc(100% + 48px)}
  .pub-intro{white-space:normal}
}

@media print{
  .navbar,.logo-fly,.fig,.bullets{display:none!important}
  .root{min-width:0}
  body{background:#fff;color:#000}
  .pin{height:auto}
  .focus{position:static;height:auto}
}

/* ---------- Request-a-call form ---------- */
.cmodal{position:fixed;inset:0;border:0;padding:0;background:transparent;color:var(--cream);
  max-width:none;max-height:none;width:100%;height:100%;margin:0;overflow:hidden}
.cmodal::backdrop{background:rgba(10,13,16,.86);backdrop-filter:blur(3px)}
/* Centre with flex, not a translate: the panel animates with idtRise, whose
   final transform:translateY(0) would replace any centring transform. */
.cmodal[open]{display:flex;align-items:center;justify-content:center}
.cmodal-in{position:relative;
  width:min(520px,calc(100vw - 40px));max-height:calc(100vh - 40px);overflow-y:auto;
  background:var(--bg);border:1px solid var(--rule-2);padding:44px 44px 36px;
  animation:idtRise .34s cubic-bezier(.25,.6,.2,1) both}
.cmodal-x{position:absolute;top:14px;right:16px;background:none;border:0;cursor:pointer;
  color:var(--dim);font:300 26px/1 var(--serif);padding:6px 10px;transition:color .2s}
.cmodal-x:hover{color:var(--cream)}
.cmodal .kicker{margin-bottom:16px}
.cmodal-h{margin:0 0 30px;font:300 30px/1.16 var(--serif);letter-spacing:-.01em;color:var(--cream)}

.cfield{margin:0 0 22px}
.cfield label{display:block;font:400 11px/1 var(--mono);letter-spacing:.14em;color:var(--dim);
  text-transform:uppercase;margin:0 0 9px}
.cfield input,.cfield textarea{width:100%;background:transparent;color:var(--cream);
  border:0;border-bottom:1px solid var(--rule-2);padding:7px 0;
  font:300 17px/1.5 var(--serif);transition:border-color .2s}
.cfield textarea{resize:vertical;min-height:88px}
.cfield input:focus,.cfield textarea:focus{outline:none;border-bottom-color:var(--deai)}
.cfield input:-webkit-autofill{-webkit-text-fill-color:var(--cream);
  -webkit-box-shadow:0 0 0 40px var(--bg) inset}
.cf-bot{position:absolute;left:-9999px;opacity:0;pointer-events:none}

.cmodal-foot{display:flex;align-items:center;gap:20px;margin-top:30px;flex-wrap:wrap}
.cmodal-send{border:0;cursor:pointer;padding:14px 26px;font:600 12px/1 var(--mono);letter-spacing:.14em}
.cmodal-send[disabled]{opacity:.5;cursor:default}
.cmodal-status{margin:0;font:400 12px/1.5 var(--mono);letter-spacing:.04em;color:var(--muted);flex:1 1 180px}
.cmodal-status.err{color:var(--deai-hi)}
.cmodal-status a{color:inherit}

.cmodal-done{text-align:left}
.cmodal-done .cmodal-h{margin-bottom:14px}
.cmodal-done p{margin:0;font:300 17px/1.6 var(--serif);color:var(--body)}

@media (max-width:767.98px){
  .cmodal-in{width:100%;max-width:none;height:100%;max-height:none;
    padding:64px 24px 32px;border:0}
  .cmodal-h{font-size:26px;margin-bottom:26px}
}