/* Landing-page phone demos (index.html): small animated scenes of the app being used, in HTML/CSS.
   Each scene is drawn at the app's own size (393 × 852 points) and scaled to the phone frame (--k).
   The default classes on .dm-app are the scene's last frame: that is what shows without JavaScript
   and under prefers-reduced-motion. The inline script on the page plays the scene while it is in view. */
.phone .screen{position:relative;aspect-ratio:393/852;overflow:hidden;border-radius:30px;--k:.5852;background:#01091C}
.split .phone .screen{--k:.6616}
@media(max-width:900px){.phones .phone .screen{--k:.458}}
.dm-app{position:absolute;top:0;left:0;width:393px;height:852px;transform:scale(var(--k));transform-origin:0 0;overflow:hidden;
  font:400 15px/1.4 Inter,-apple-system,Segoe UI,Roboto,sans-serif;color:#0A1128;-webkit-font-smoothing:antialiased;text-align:left;
  transition:opacity .4s}
.dm-app *{box-sizing:border-box}
/* The page's own type styles stop at the phone's edge. */
:where(.dm-app) :is(p,h2,h3,h4,small,b){margin:0;font-size:inherit;letter-spacing:normal;line-height:inherit;color:inherit;max-width:none;font-family:inherit;font-weight:inherit;text-transform:none}
:where(.dm-app) b{font-weight:600}
.dm-app.fade{opacity:0}
.dm-app.instant,.dm-app.instant *{transition:none!important;animation:none!important}
.dm-dark{background:#01091C;color:#F2F5FC}
.dm-light{background:#F4F6FB}
.dm-serif{font-family:Newsreader,Georgia,serif;font-weight:400}
.ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.dm-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Pieces shared with the app */
.dm-av{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#E9EDF6;color:#2563EB;font:600 15px Inter,sans-serif;flex-shrink:0}
.dm-av.sm{width:34px;height:34px;font-size:12px}
.dm-av.c2{background:#E1F3EA;color:#1F8A5B}.dm-av.c3{background:#FBE6DA;color:#B4511F}.dm-av.c4{background:#ECE8FF;color:#4C39F4}
.dm-tick{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#2563EB;color:#fff;vertical-align:-2px;margin-left:4px}
.dm-tick .ic{width:11px;height:11px;stroke-width:3.4}
.dm-type{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font:600 12px Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.dm-dark .dm-type{background:rgba(37,99,235,.28);border:1px solid rgba(56,182,255,.45);color:#F2F5FC}
.dm-light .dm-type{background:#E4EAF8;color:#1D4ED8;letter-spacing:.04em;text-transform:none;font-size:13px}
.dm-strength{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;font:600 13px Inter,sans-serif;background:#E1EAFD;color:#1D4ED8}
.dm-strength::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.dm-dark .dm-strength{background:rgba(242,245,252,.14);color:#F2F5FC}
.dm-light .dm-strength{background:#E1EAFD;color:#1D4ED8}
.dm-eyebrow{font:700 12px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#5C6682}
.dm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:12px;font:600 15px Inter,sans-serif;background:#2563EB;color:#fff;transition:background .25s,color .25s,border-color .25s}
.dm-btn.ghost{background:#fff;color:#0A1128;border:1px solid #DDE3F0}
.dm-btn.sm{padding:8px 14px;font-size:14px;border-radius:10px}
.dm-grab{width:40px;height:5px;border-radius:3px;background:#C2CBDF;margin:8px auto 14px}
.dm-sheet{position:absolute;left:0;right:0;bottom:0;background:#F4F6FB;color:#0A1128;border-radius:22px 22px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.35);
  transform:translateY(102%);transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.dm-scrim{position:absolute;inset:0;background:rgba(1,9,28,.55);opacity:0;transition:opacity .4s;pointer-events:none}
.dm-tabbar{position:absolute;left:0;right:0;bottom:0;height:64px;display:flex;align-items:center;justify-content:space-around;border-top:1px solid #121C38;background:#01091C;color:#9BA7C4;font:500 11px Inter,sans-serif}
.dm-tabbar span{display:flex;flex-direction:column;align-items:center;gap:3px}
.dm-tabbar .on{color:#F2F5FC}
.dm-tabbar .dm-plusbtn{width:52px;height:36px;border-radius:10px;background:linear-gradient(135deg,#01B1FA,#276AF9,#4C39F4);display:grid;place-items:center;color:#fff}
.dm-light .dm-tabbar{background:#fff;border-top-color:#DDE3F0;color:#8B94AC}.dm-light .dm-tabbar .on{color:#0A1128}
.dm-toast{position:absolute;left:20px;right:20px;bottom:84px;padding:13px 16px;border-radius:14px;background:#0A1128;color:#fff;font:500 14px Inter,sans-serif;
  display:flex;gap:10px;align-items:center;opacity:0;transform:translateY(16px);transition:opacity .3s,transform .3s}
.dm-toast .ic{color:#38B6FF;width:18px;height:18px}

/* The finger: a soft dot that shows where the person taps or swipes. */
.dm-finger{position:absolute;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(255,255,255,.6);border:2px solid rgba(255,255,255,.9);
  box-shadow:0 4px 18px rgba(0,0,0,.35);opacity:0;pointer-events:none;z-index:20}
.dm-light .dm-finger{background:rgba(37,99,235,.28);border-color:rgba(37,99,235,.65)}
.dm-finger.tap{animation:dm-tap .6s ease-out}
.dm-finger.swipe{animation:dm-swipe .9s ease-in-out}
@keyframes dm-tap{0%{opacity:0;transform:scale(1.5)}30%{opacity:1;transform:scale(1)}55%{opacity:1;transform:scale(.82)}100%{opacity:0;transform:scale(1.25)}}
@keyframes dm-swipe{0%{opacity:0;transform:translateY(0)}20%{opacity:1}80%{opacity:1;transform:translateY(-300px)}100%{opacity:0;transform:translateY(-320px)}}
.dm-caret{display:inline-block;width:2px;height:18px;background:#2563EB;vertical-align:-3px;margin-left:1px;animation:dm-blink 1s steps(1) infinite}
@keyframes dm-blink{50%{opacity:0}}

/* ─── (a) The feed, then the Evidence Card ─────────────────────────────── */
.dm-feed .dm-tabs{position:absolute;top:18px;left:0;right:0;display:flex;justify-content:center;gap:36px;font:500 18px Inter,sans-serif;color:rgba(242,245,252,.62);z-index:3}
.dm-feed .dm-tabs b{color:#F2F5FC;font-weight:600}
.dm-reel{position:absolute;inset:0 0 64px;transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.dm-post{position:absolute;left:0;right:0;height:788px;overflow:hidden}
.dm-post.p2{top:788px}
.dm-post::before{content:"";position:absolute;inset:-12%;background:var(--bg);animation:dm-drift 14s ease-in-out infinite alternate}
.dm-post.p1{--bg:radial-gradient(60% 40% at 30% 30%,rgba(240,150,90,.55),transparent 70%),radial-gradient(50% 45% at 75% 60%,rgba(76,57,244,.45),transparent 70%),linear-gradient(#1A1530,#01091C)}
.dm-post.p2{--bg:radial-gradient(55% 40% at 70% 28%,rgba(56,182,255,.5),transparent 70%),radial-gradient(60% 50% at 25% 65%,rgba(37,99,235,.5),transparent 70%),linear-gradient(#0B1E3F,#01091C)}
@keyframes dm-drift{to{transform:translate(4%,-3%) scale(1.08)}}
.dm-post::after{content:"";position:absolute;inset:auto 0 0;height:60%;background:linear-gradient(transparent,rgba(1,9,28,.92))}
.dm-post>*{position:absolute;z-index:1}
.dm-post .dm-type{top:64px;left:20px}
.dm-rail{right:12px;bottom:170px;display:flex;flex-direction:column;align-items:center;gap:18px;font:600 13px Inter,sans-serif}
.dm-rail span{display:flex;flex-direction:column;align-items:center;gap:4px}
.dm-rail .ic{width:30px;height:30px;stroke-width:1.8}
.dm-meta{left:20px;right:80px;bottom:24px;display:flex;flex-direction:column;gap:10px}
.dm-who{display:flex;align-items:center;gap:12px}
.dm-who b{display:block;font:600 17px Inter,sans-serif}
.dm-who small{display:block;color:#9BA7C4;font-size:13px}
.dm-meta h3{margin:0;font-size:25px;line-height:1.18;color:#F2F5FC}
.dm-cites{font-size:13px;color:#9BA7C4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-cites b{color:#38B6FF;font-weight:600}
.dm-evbtn{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:10px 16px;border-radius:12px;background:#38B6FF;color:#021330;font:600 15px Inter,sans-serif}
.dm-evbtn .ic{width:18px;height:18px}
.dm-card{height:640px;padding:0 22px;z-index:5;overflow:hidden}
.dm-card .dm-scroll{transition:transform .9s cubic-bezier(.3,.7,.2,1)}
.dm-card h4{margin:0 0 6px;font:600 13px Inter,sans-serif;color:#5C6682}
.dm-claim{font-size:22px;line-height:1.25;margin:6px 0 16px}
.dm-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.dm-meter{display:flex;gap:4px;margin:6px 0 4px}.dm-meter i{flex:1;height:7px;border-radius:4px;background:#DDE3F0}.dm-meter i.on{background:#2563EB}
.dm-note{font-size:12.5px;color:#8B94AC;margin:0 0 18px}
.dm-found{font-size:15px;line-height:1.5;color:#27304A;margin:0 0 20px}
.dm-src{display:flex;gap:12px;padding:13px 14px;border:1px solid #DDE3F0;border-radius:14px;background:#fff;margin-bottom:10px}
.dm-src .dm-rel{flex-shrink:0;align-self:flex-start;padding:3px 9px;border-radius:999px;font:600 11.5px Inter,sans-serif;background:#E1EAFD;color:#1D4ED8}
.dm-src .dm-rel.ctx{background:#E9ECF4;color:#55607C}
.dm-src b{display:block;font:500 14px/1.3 Inter,sans-serif}
.dm-src small{display:block;color:#5C6682;font-size:12.5px;margin-top:3px}
.dm-feed.s-scrolled .dm-reel{transform:translateY(-788px)}
.dm-feed.s-card .dm-card{transform:none}
.dm-feed.s-card .dm-scrim{opacity:1}
.dm-feed.s-deep .dm-scroll{transform:translateY(-250px)}

/* ─── (b) Joining the discussion ───────────────────────────────────────── */
.dm-talk .dm-bg{position:absolute;inset:0;background:radial-gradient(60% 40% at 70% 25%,rgba(56,182,255,.35),transparent 70%),linear-gradient(#0B1E3F,#01091C)}
.dm-talk .dm-top{position:absolute;top:56px;left:20px;right:20px;display:flex;flex-direction:column;gap:10px}
.dm-talk .dm-top h3{margin:0;font-size:24px;line-height:1.2}
.dm-talk .dm-top small{color:#9BA7C4;font-size:13px}
.dm-comments{top:200px;transform:none;display:flex;flex-direction:column;padding:0 18px}
.dm-comments header{display:flex;justify-content:space-between;align-items:center;padding:0 2px 12px;border-bottom:1px solid #DDE3F0}
.dm-comments header b{font:600 17px Inter,sans-serif}
.dm-comments header .n1{display:none}
.dm-list{flex:1;display:flex;flex-direction:column;gap:16px;padding-top:16px;overflow:hidden}
.dm-cm{display:flex;gap:11px}
.dm-cm b{font:600 14px Inter,sans-serif}
.dm-cm small{color:#8B94AC;font-size:12.5px;margin-left:6px}
.dm-cm p{margin:3px 0 0;font-size:14.5px;line-height:1.42;color:#27304A}
.dm-cm.dm-new{border-radius:14px;padding:8px;margin:-8px;transition:opacity .5s,transform .5s,background-color 1.6s}
.dm-compose{display:flex;align-items:center;gap:10px;padding:12px 0 26px;border-top:1px solid #DDE3F0}
.dm-input{flex:1;min-height:44px;padding:11px 14px;border-radius:14px;border:1px solid #DDE3F0;background:#fff;font-size:14.5px;color:#0A1128;transition:border-color .25s,box-shadow .25s;overflow:hidden;white-space:nowrap}
.dm-input .ph{color:#8B94AC}
.dm-input .dm-caret,.dm-input .dm-typed{display:none}
.dm-send{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#E9EDF6;color:#8B94AC;transition:background .25s,color .25s}
.dm-send .ic{width:20px;height:20px}
.dm-talk.s-focus .dm-input{border-color:#2563EB;box-shadow:0 0 0 3px rgba(37,99,235,.16)}
.dm-talk.s-focus .dm-input .ph{display:none}
.dm-talk.s-focus .dm-input .dm-typed{display:inline}.dm-talk.s-focus .dm-input .dm-caret{display:inline-block}
.dm-talk.s-typed .dm-send{background:#2563EB;color:#fff}
.dm-talk:not(.s-sent) .dm-new{opacity:0;transform:translateY(14px)}
.dm-talk.s-sent .dm-new{background:#E1EAFD}
.dm-talk.s-settled .dm-new{background:transparent}
.dm-talk.s-sent header .n0{display:none}.dm-talk.s-sent header .n1{display:inline}

/* ─── (c) Citing someone ───────────────────────────────────────────────── */
.dm-cite .dm-page{position:absolute;inset:0;padding:22px 22px 0;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.dm-nav{display:flex;align-items:center;justify-content:space-between;font:600 14px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;margin-bottom:22px}
.dm-nav .ic{width:22px;height:22px}
.dm-orig h3{font-size:27px;line-height:1.18;margin:10px 0 10px}
.dm-orig p{color:#5C6682;font-size:15px;line-height:1.5;margin:0 0 16px}
.dm-stat{display:flex;gap:18px;margin:18px 0 22px;font-size:14px;color:#5C6682}
.dm-stat b{color:#0A1128;font-size:16px}
.dm-compose-page{transform:translateX(102%);background:#F4F6FB}
.dm-field{border:1px solid #DDE3F0;background:#fff;border-radius:14px;padding:13px 15px;margin-bottom:12px;font-size:15px}
.dm-field.title{font-family:Newsreader,Georgia,serif;font-size:21px;line-height:1.25}
.dm-citecard{display:flex;gap:10px;align-items:flex-start;padding:14px;border-radius:14px;background:#fff;border:1px solid #DDE3F0;
  opacity:0;transform:scale(.94);transition:opacity .4s,transform .45s cubic-bezier(.2,.9,.3,1.3),background-color 1.6s,border-color 1.6s}
.dm-citecard .ic{color:#2563EB;width:20px;height:20px;margin-top:1px}
.dm-citecard b{color:#1D4ED8;font-weight:600}
.dm-citecard span{font-size:14.5px;line-height:1.4}
.dm-relsheet{padding:0 20px 30px;z-index:5}
.dm-relsheet h4{margin:0 0 4px;font:600 19px Inter,sans-serif}
.dm-relsheet>p{margin:0 0 14px;color:#5C6682;font-size:14px}
.dm-opt{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #DDE3F0;border-radius:14px;background:#fff;margin-bottom:9px;transition:border-color .25s,background-color .25s}
.dm-opt i{width:20px;height:20px;border-radius:50%;border:2px solid #C2CBDF;flex-shrink:0;transition:border .25s}
.dm-opt b{display:block;font:600 15px Inter,sans-serif}
.dm-opt small{display:block;color:#5C6682;font-size:12.5px}
.dm-cite.s-sheet .dm-relsheet{transform:none}
.dm-cite.s-sheet .dm-scrim{opacity:1}
.dm-cite.s-rel .dm-opt.ref{border-color:#2563EB;background:#E1EAFD}
.dm-cite.s-rel .dm-opt.ref i{border:6px solid #2563EB}
.dm-cite.s-compose .dm-first{transform:translateX(-30%)}
.dm-cite.s-compose .dm-compose-page{transform:none}
.dm-cite.s-cited .dm-citecard{opacity:1;transform:none;background:#E1EAFD;border-color:#2563EB}
.dm-cite.s-settled .dm-citecard{background:#fff;border-color:#DDE3F0}
.dm-cite.s-cited .dm-toast{opacity:1;transform:none}
.dm-cite.s-settled .dm-toast{opacity:0;transform:translateY(16px)}

/* ─── (d) Following a subject and a person ─────────────────────────────── */
.dm-find{padding:22px 20px 0}
.dm-find h2{margin:0 0 14px;font-size:32px}
.dm-search{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border-radius:13px;border:1px solid #DDE3F0;background:#fff;color:#8B94AC;font-size:15px;margin-bottom:14px}
.dm-search .ic{width:18px;height:18px}
.dm-chips{display:flex;gap:8px;margin-bottom:14px;white-space:nowrap}
.dm-chips span{padding:8px 14px;border-radius:999px;background:#fff;border:1px solid #DDE3F0;font:500 14px Inter,sans-serif;transition:background .25s,color .25s,border-color .25s}
.dm-subject{position:relative;height:0;opacity:0;overflow:hidden;border-radius:16px;margin-bottom:0;color:#fff;
  background:radial-gradient(70% 90% at 80% 10%,rgba(56,182,255,.6),transparent 70%),linear-gradient(135deg,#0A2466,#276AF9);
  transition:height .45s cubic-bezier(.3,.7,.2,1),opacity .35s,margin .45s}
.dm-subject .in{position:absolute;inset:auto 16px 14px 16px;display:flex;justify-content:space-between;align-items:flex-end}
.dm-subject b{display:block;font:500 26px Newsreader,Georgia,serif}
.dm-subject small{font-size:13px;color:rgba(255,255,255,.85)}
.dm-follow{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;font:600 14px Inter,sans-serif;background:#fff;color:#0A1128;border:1px solid transparent;transition:background .25s,color .25s,border-color .25s}
.dm-follow .ic{width:16px;height:16px;display:none}
.dm-follow .on,.dm-c1{display:none}
.dm-pcard{display:flex;flex-direction:column;gap:7px;padding:14px;border:1px solid #DDE3F0;background:#fff;border-radius:16px;margin-bottom:10px}
.dm-pcard h3{margin:0;font-size:19px;line-height:1.22}
.dm-pcard small{color:#5C6682;font-size:13px}
.dm-pcard .dm-row{margin:0}
.dm-sets{position:relative;height:300px}
.dm-sets>div{position:absolute;inset:0;transition:opacity .45s,transform .45s}
.dm-sets .all{opacity:1}.dm-sets .reading{opacity:0;transform:translateY(10px)}
.dm-people{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #DDE3F0;background:#fff;border-radius:16px}
.dm-people .dm-grow{flex:1;min-width:0}
.dm-people b{font:600 15px Inter,sans-serif}
.dm-people small{display:block;color:#5C6682;font-size:12.5px}
.dm-people .dm-follow{background:#2563EB;color:#fff}
.dm-find .dm-eyebrow{margin:16px 0 10px}
.dm-discover.s-topic .dm-chips .reading{background:#0A1128;color:#fff;border-color:#0A1128}
.dm-discover.s-topic .dm-subject{height:120px;opacity:1;margin-bottom:12px}
.dm-discover.s-topic .dm-sets .all{opacity:0;transform:translateY(-10px)}
.dm-discover.s-topic .dm-sets .reading{opacity:1;transform:none}
.dm-discover.s-subj .dm-subject .dm-follow{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.6)}
.dm-discover.s-subj .dm-subject .dm-follow .off,.dm-discover.s-person .dm-people .dm-follow .off{display:none}
.dm-discover.s-subj .dm-subject .dm-follow .on,.dm-discover.s-subj .dm-subject .dm-follow .ic,
.dm-discover.s-person .dm-people .dm-follow .on,.dm-discover.s-person .dm-people .dm-follow .ic{display:inline}
.dm-discover.s-person .dm-people .dm-follow{background:#fff;color:#0A1128;border-color:#DDE3F0}
.dm-discover.s-person .dm-c0{display:none}.dm-discover.s-person .dm-c1{display:inline}
.dm-discover.s-toast .dm-toast{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){.dm-app,.dm-app *{transition:none!important;animation:none!important}}
.dm-av::before{content:attr(data-i)}