/* =========================================================
   doitrustthis.com — landing page layout
   ========================================================= */
body{padding-inline:20px}
.page{position:relative;z-index:1;max-width:1120px;margin:0 auto}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px;flex-wrap:wrap;position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.top::before{content:"";position:absolute;top:0;bottom:-32px;left:50%;width:100vw;transform:translate(-50%,calc(-48px * (1 - var(--nav-progress,0))));z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.96) 0%,rgba(0,0,0,.8) 48%,rgba(0,0,0,0) 100%);opacity:var(--nav-progress,0)}
@media (prefers-reduced-motion:reduce){.top::before{transform:translateX(-50%)}}
.top nav{display:flex;gap:22px;flex-wrap:wrap}
.top nav a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dit-text);text-decoration:none;transition:color var(--t-tap)}
.top nav a:hover{color:var(--dit-ink)}
.nav-toggle{display:none;width:44px;height:44px;flex:none;align-content:center;justify-items:center;gap:5px;border:1px solid var(--dit-line);border-radius:var(--dit-r-md);background:transparent;color:var(--dit-ink)}
.nav-toggle span{display:block;width:20px;height:1.5px;background:currentColor;transition:transform var(--t-tap),opacity var(--t-tap)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
#check,#how,#examples,#privacy{scroll-margin-top:96px}

/* hero */
.hero{padding-block:40px 24px;display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.hero .dit-lede{color:var(--dit-text)}
.hero-channels{display:grid;gap:10px;margin-top:4px}
.hero-channels .dit-mono{font-size:10.5px;letter-spacing:.14em;color:var(--dit-muted)}

/* ---------- checker ---------- */
.dit-check{max-width:940px;width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.dit-check .view{transition:opacity var(--t-reveal) var(--e-out),transform var(--t-reveal) var(--e-out)}
.dit-check .view.enter{opacity:0;transform:translateY(12px)}
.ck-form{background:rgba(12,18,16,.92);border:1px solid var(--dit-line);border-radius:var(--dit-r-xl);overflow:hidden;box-shadow:0 30px 80px -40px rgba(0,0,0,.8)}
.ck-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid var(--dit-line-2);flex-wrap:wrap}
.ck-tabs{display:flex;position:relative}
.ck-tabs button{background:none;border:0;padding:15px 14px;font-family:var(--dit-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dit-muted);transition:color var(--t-tap)}
.ck-tabs button[aria-selected="true"]{color:var(--dit-ink)}
.ck-tabs button:hover{color:var(--dit-ink)}
.ck-tabs .ink{position:absolute;bottom:-1px;height:2px;background:var(--dit-mint);border-radius:2px;left:var(--x,0);width:var(--w,0);transition:left var(--t-move) var(--e-out),width var(--t-move) var(--e-out)}
.ck-preview{font-family:var(--dit-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dit-amber);display:flex;gap:6px;align-items:center;padding-block:10px}
.ck-preview::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dit-amber);animation:dit-breathe 3.2s ease-in-out infinite}
.ck-panel{padding:18px 18px 8px}
.ck-panel label.sr + textarea, .ck-panel textarea{width:100%;min-height:128px;resize:vertical;background:transparent;border:0;color:var(--dit-ink);font:inherit;font-size:17px;line-height:1.55;outline:none;padding:0}
.ck-panel textarea::placeholder,.ck-panel input::placeholder{color:var(--dit-muted)}
.ck-url{display:flex;align-items:center;gap:10px;border:1px solid var(--dit-line);border-radius:var(--dit-r-md);padding:14px 16px;background:var(--dit-bg);transition:border-color var(--t-tap)}
.ck-url:focus-within{border-color:var(--dit-mint)}
.ck-url span{font-family:var(--dit-mono);font-size:12px;color:var(--dit-muted)}
.ck-url input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--dit-ink);font:inherit;font-size:17px}
.ck-drop{display:grid;place-items:center;gap:8px;text-align:center;min-height:160px;border:1.5px dashed var(--dit-line);border-radius:var(--dit-r-md);padding:20px;cursor:pointer;transition:border-color var(--t-tap),background var(--t-tap)}
.ck-drop:hover,.ck-drop.over{border-color:var(--dit-mint);background:rgba(183,240,212,.04)}
.ck-drop b{color:var(--dit-ink);font-weight:500}
.ck-drop span{font-size:13px;color:var(--dit-muted)}
.ck-drop input{position:absolute;width:1px;height:1px;opacity:0}
.ck-file{display:flex;gap:14px;align-items:center;border:1px solid var(--dit-line);border-radius:var(--dit-r-md);padding:10px;background:var(--dit-bg)}
.ck-file img{width:64px;height:64px;object-fit:cover;border-radius:var(--dit-r-sm);border:1px solid var(--dit-line)}
.ck-file div{flex:1;min-width:0;font-size:14px;color:var(--dit-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-file small{display:block;font-family:var(--dit-mono);font-size:10.5px;color:var(--dit-muted)}
.ck-caption{margin-top:10px;width:100%;background:transparent;border:1px solid var(--dit-line);border-radius:var(--dit-r-md);padding:10px 12px;color:var(--dit-ink);font:inherit;font-size:15px;outline:none}
.ck-caption:focus{border-color:var(--dit-mint)}
.ck-err{color:var(--dit-amber);font-size:13.5px;margin:8px 0 0;min-height:0}
.ck-err:empty{display:none}
.ck-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 16px 16px;flex-wrap:wrap}
.ck-samples{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ck-samples > span{font-family:var(--dit-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dit-muted);margin-right:4px}
.ck-samples button{font-size:12.5px;border:1px solid var(--dit-line-2);background:var(--dit-surface-2);color:var(--dit-text);border-radius:var(--dit-r-pill);padding:5px 11px;transition:border-color var(--t-tap),color var(--t-tap)}
.ck-samples button:hover{border-color:var(--dit-mint);color:var(--dit-ink)}
.ck-promise{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--dit-muted);padding-inline:4px}
.ck-promise span{display:inline-flex;gap:7px;align-items:center}
.ck-promise span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--dit-mint)}

/* running view */
.ck-run{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;background:rgba(12,18,16,.92);border:1px solid var(--dit-line);border-radius:var(--dit-r-xl);padding:22px}
.ck-run .left{display:grid;justify-items:center;gap:12px;text-align:center;min-width:150px}
.ck-run .left p{margin:0;font-size:13.5px;color:var(--dit-ink)}
.ck-run .left small{font-family:var(--dit-mono);font-size:10px;letter-spacing:.12em;color:var(--dit-muted);text-transform:uppercase}

/* result view */
.ck-result{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:18px;align-items:start}
.ck-result .col{display:grid;gap:12px}
.ck-result .dit-card{padding:22px;gap:14px}
.ck-result .dit-card .h{font-size:24px}
.ck-sec{font-family:var(--dit-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dit-muted)}
.ck-sent-img{max-width:100%;max-height:260px;border-radius:var(--dit-r-md);border:1px solid var(--dit-line);display:block}
.ck-sent-url{font-family:var(--dit-mono);font-size:14px;word-break:break-all;background:var(--dit-surface-2);border:1px solid var(--dit-line);border-radius:var(--dit-r-md);padding:12px 14px;color:var(--dit-ink)}
.ck-foot{display:flex;align-items:center;gap:12px;border-top:1px solid var(--dit-line-2);padding-top:14px;flex-wrap:wrap}
.ck-foot p{margin:0;flex:1;min-width:170px;font-size:12.5px;color:var(--dit-muted)}
.ck-actions{display:flex;gap:8px;flex-wrap:wrap}
.ck-error{background:rgba(12,18,16,.92);border:1px solid var(--dit-line);border-radius:var(--dit-r-xl);padding:22px;display:grid;gap:10px;justify-items:start}
.ck-error b{color:var(--dit-amber);font-size:18px;font-weight:500}
.ck-error p{margin:0}

/* this-session history */
.ck-history{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:14px 16px;border:1px solid var(--dit-line-2);border-radius:var(--dit-r-lg);background:rgba(12,18,16,.6)}
.ck-history ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.ck-history li{min-width:0;display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--dit-line-2);font-size:14px}
.ck-history li:first-child{border-top:0}
.ck-history li button.open{flex:1;min-width:0;text-align:left;background:none;border:0;padding:0;color:var(--dit-ink);display:flex;gap:10px;align-items:center;overflow:hidden}
.ck-history li button.open span.t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-history li .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.ck-history li small{font-family:var(--dit-mono);font-size:10px;color:var(--dit-muted);white-space:nowrap}

/* sections */
.sec{padding-block:88px 24px;display:grid;grid-template-columns:minmax(0,1fr);gap:30px;border-top:1px solid var(--dit-line-2);margin-top:64px}
.sec-head{display:grid;gap:12px}
.sec-head p{max-width:62ch;margin:0}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.step{text-align:left;background:rgba(12,18,16,.8);border:1px solid var(--dit-line-2);border-radius:var(--dit-r-lg);padding:18px;display:grid;gap:8px;align-content:start;transition:border-color var(--t-move),background var(--t-move)}
.step .n{font-family:var(--dit-mono);font-size:12px;color:var(--dit-mint);letter-spacing:.1em}
.step b{color:var(--dit-ink);font-size:18px;font-weight:600}
.step p{margin:0;font-size:14px}
.step.cur{border-color:var(--dit-deep);background:rgba(31,58,48,.25)}
.step:hover{border-color:var(--dit-line)}

/* explainer player */
.player{background:rgba(12,18,16,.9);border:1px solid var(--dit-line-2);border-radius:var(--dit-r-xl);overflow:hidden}
.player .screen{position:relative;aspect-ratio:16/9;max-width:100%;overflow:hidden;background:var(--dit-bg)}
.player .bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:12px 16px;border-top:1px solid var(--dit-line-2)}
.player .pp{width:34px;height:34px;border-radius:50%;border:1px solid var(--dit-line);background:transparent;display:grid;place-items:center}
.player .pp:hover{border-color:var(--dit-mint)}
.player input[type=range]{width:100%;accent-color:var(--dit-mint)}
.player .time{font-family:var(--dit-mono);font-size:11px;color:var(--dit-muted);font-variant-numeric:tabular-nums}

/* examples */
.examples{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.examples .dit-card{padding:20px}
.examples .note{font-size:13.5px;color:var(--dit-muted);max-width:70ch;margin:0}

/* limits */
.limits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 36px}
.limits li{display:grid;grid-template-columns:18px 1fr;gap:10px;padding:16px 0;border-top:1px solid var(--dit-line-2);font-size:15px}
.limits li::before{content:"·";color:var(--dit-mint);font-size:22px;line-height:1}
.limits b{color:var(--dit-ink);font-weight:500}

/* privacy */
.privacy{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center}
.privacy .demo{display:grid;justify-items:center;gap:10px;text-align:center}
.privacy .demo small{font-family:var(--dit-mono);font-size:10px;letter-spacing:.12em;color:var(--dit-muted);text-transform:uppercase}
.ret-table{display:grid;border-top:1px solid var(--dit-line)}
.ret-table div{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--dit-line);font-size:17px}
.ret-table b{color:var(--dit-ink);font-weight:500;white-space:nowrap}
.privacy p{margin:18px 0 0;font-size:14px;max-width:62ch}

/* channels / public reply */
.channels{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.channels p{margin:0}

/* trustgraph band */
.tg{position:relative;overflow:hidden;border:1px solid var(--dit-line-2);border-radius:var(--dit-r-xl);padding:48px 32px;display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center;background:rgba(12,18,16,.8)}
.tg p{margin:0;max-width:52ch}
.tg .actions{margin-top:18px}

footer{padding-block:56px 64px;margin-top:80px;border-top:1px solid var(--dit-line-2);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--dit-muted)}
footer nav{display:flex;gap:18px}
footer a{color:var(--dit-text);text-decoration:none}
footer a:hover{color:var(--dit-ink)}

@media (max-width:860px){
  .ck-result,.steps,.examples,.channels,.limits{grid-template-columns:1fr}
  .privacy,.tg{grid-template-columns:1fr}
  .ck-run{grid-template-columns:1fr}
  .ck-result .dit-card{order:-1}
}
@media (max-width:700px){
  .top{padding-block:14px}
  .top[data-nav-ready]{flex-wrap:nowrap}
  .nav-toggle{display:grid}
  .top[data-nav-ready] nav{display:none;position:absolute;top:calc(100% - 2px);right:0;width:min(280px,100%);max-height:calc(100dvh - 100px);overflow:auto;flex-direction:column;gap:4px;padding:10px;border:1px solid var(--dit-line);border-radius:var(--dit-r-lg);background:rgba(6,9,8,.97);box-shadow:0 20px 48px rgba(0,0,0,.35)}
  .top[data-nav-ready].is-menu-open nav{display:flex}
  .top[data-nav-ready] nav a{display:block;padding:16px 14px;border-radius:var(--dit-r-sm)}
  .top[data-nav-ready] nav a:hover{background:var(--dit-surface-2)}
}
@media (max-width:520px){
  .player .bar{grid-template-columns:auto 1fr}
  .player .time{grid-column:1/-1}
  .tg{padding:28px 20px}
}

[hidden]{display:none!important}
.skip-link{position:absolute;left:1rem;top:-6rem;z-index:99;background:var(--dit-surface);padding:1rem;color:var(--dit-ink)}
.skip-link:focus{top:1rem}
.ck-availability,.ck-consent,.ck-noscript{font-size:13px;color:var(--dit-text);line-height:1.6}
.ck-consent{padding:0 18px 18px}
.ck-availability button{margin-left:12px}
.ck-err{padding-inline:18px}
.ck-index{font-size:30px;color:var(--dit-ink)}
.ck-index small{font-size:12px;color:var(--dit-text)}
.ck-result details{font-size:13px;color:var(--dit-text)}
.ck-result details ul{padding-left:20px}
.ck-result .col{min-width:0;overflow-wrap:anywhere}
.ck-result .sum,.ck-result dd,.dit-reasons li{overflow-wrap:anywhere}
.explainer-video{margin-top:14px;color:var(--dit-text);font-size:14px}
.explainer-video video{display:block;width:100%;max-width:960px;margin-top:12px;border-radius:12px}
.explainer-video p{margin-top:12px}
#question-demo{margin-top:20px;max-width:620px}
.ck-uploads{font-size:13px;color:var(--dit-muted);padding:0 18px 14px}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--dit-cyan);outline-offset:4px}
.ck-drop:focus-within{outline:2px solid var(--dit-cyan);outline-offset:4px}