:root{--blue:#2e77ff;--cyan:#28dcff;--ink:#172238;--line:#d9e4f1;--p:#8B5CF6;--a:#FDB022;--r:#F43F5E;--b:#3B82F6;font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink)}
*{box-sizing:border-box}
body{margin:0;background:#edf4fc;line-height:1.5}
[hidden]{display:none!important}
button,a{font:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.reviewbar{position:fixed;z-index:20;top:0;width:100%;padding:8px 24px;background:var(--ink);color:#fff;font-size:12px;display:flex;justify-content:space-between}
.reviewbar button{border:0;background:none;color:#fff;text-decoration:underline;margin-left:10px}
.hero{min-height:94vh;position:relative;display:grid;place-items:center;overflow:hidden;color:#fff;background:#10203b}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0c1c36c9,#0c1c3630),url(assets/dio-reentry-phone-hero.webp) center/cover}
.hero>*{position:relative}
.hero nav{position:absolute;top:54px;left:32px;right:32px;display:flex;justify-content:space-between;align-items:center;padding:12px 17px;border-radius:999px;border:1px solid #fff8;background:#ffffff24;backdrop-filter:blur(18px)}
.hero nav img{width:112px}
.hero nav a,.hero nav button{border:0;background:none;color:#fff;margin-left:16px}
.pill{padding:10px 17px!important;border-radius:999px!important;background:#fff!important;color:var(--ink)!important;font-weight:700}
.blue{background:var(--blue)!important;color:#fff!important}
.hero-copy{max-width:730px;text-align:center;margin-top:55px;text-shadow:0 2px 18px #0008}
.hero-copy>p:first-child,.features header>p,.demo header p,.stories header p,.pricing header p,.capabilities p{font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:800}
.hero h1,.features h2,.demo h2,.stories h2,.capabilities h2,.pricing h2,.faq h2{font-size:clamp(34px,6vw,82px);line-height:.98;letter-spacing:-.06em;margin:10px 0}
.hero h2{font-size:clamp(18px,2vw,27px);font-weight:500}
.hero-copy>p:nth-of-type(2){max-width:560px;margin:20px auto;font-size:18px}
.hero-copy div{margin-top:25px;display:flex;justify-content:center;gap:20px;align-items:center}
.hero-copy a{color:#fff}
.hero-cue{position:absolute;right:9%;bottom:10%;width:245px;padding:16px;border-radius:18px;background:#ffffffe8;color:var(--ink);box-shadow:0 18px 50px #0005;display:grid;gap:5px}
.hero-cue i{font-style:normal;color:var(--blue);font-size:12px}
.features,.demo,.stories,.capabilities,.pricing,.faq{max-width:1180px;margin:auto;padding:100px 28px}
.features header{max-width:600px}
.features header span{color:#66778d}
.feature-grid{display:grid;grid-template-columns:400px 1fr;gap:60px;margin-top:48px}
.accordion{border-top:1px solid var(--line)}
.feature{display:flex;width:100%;gap:14px;padding:20px 2px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;color:var(--ink)}
.feature b{color:var(--blue)}
.feature span{display:grid;gap:4px}
.feature small{color:#718198}
.feature:not(.active) small{display:none}
.feature i{margin-left:auto}
.vignette{min-height:370px;border-radius:28px;padding:30px;background:#1a2942;color:#f5f8ff;box-shadow:0 30px 60px #91a4bd}
.mini{margin:65px auto 0;padding:18px;width:76%;border:1px solid #ffffff33;border-radius:18px;background:#ffffff10}
.mini-chat,.mini-plan,.mini-doc,.mini-status{padding:12px;border-radius:11px;background:#f7fbff;color:var(--ink);margin-top:12px}
.trust{max-width:1180px;margin:auto;padding:0 28px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.trust article,.tiers article,.todaycard,.tile{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 12px 30px #9aaac025}
.trust p{color:#66778d}
.demo-product{margin-top:38px;min-height:390px;padding:28px;display:grid;grid-template-columns:65px 1fr;gap:38px;border-radius:30px;background:#1a2942;color:#fff}
.mini-rail{border-right:1px solid #fff3;text-align:center}
.mini-rail small{display:block;font-size:11px;margin-top:25px}
.demo-product>div:last-child{max-width:610px;width:100%;margin:55px auto}
.bubble{max-width:70%;padding:13px 16px;border-radius:16px}
.user{margin-left:auto;background:#436da9}
.dio{background:#ffffff1a}
.attachment{padding:16px;border-radius:15px;background:#f5f9ff;color:var(--ink);display:grid;gap:4px}
.attachment button{justify-self:start;border:0;background:none;color:var(--blue)}
.stories{display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:end}
.stories header button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff}
.story-rail{display:flex;gap:14px;overflow:auto;padding-bottom:8px}
.story-rail article{position:relative;flex:0 0 210px;height:385px;border-radius:18px;overflow:hidden;color:#fff}
.story-rail img{width:100%;height:100%;object-fit:cover}
.story-rail span,.story-rail button{position:absolute;left:14px;right:14px}
.story-rail span{bottom:47px;font-weight:700}
.story-rail button{bottom:13px;border:0;border-radius:999px;padding:8px;background:#fffd;color:var(--ink);font-size:11px}
.capabilities{display:grid;grid-template-columns:1fr 1fr;gap:55px}
.cap-list{display:grid;gap:8px}
.cap-list button{padding:15px;border:1px solid var(--line);border-radius:13px;background:#fff;text-align:left;color:var(--ink)}
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.tiers strong{display:block;margin-top:24px;font-size:32px}
.tiers small{color:#607188}
.tiers p{color:#62738a;font-size:14px}
.faq{max-width:730px;text-align:center}
.faq details{text-align:left;padding:15px;border-top:1px solid var(--line)}
footer{text-align:center;padding:30px;color:#78879b;font-size:12px}
#app{min-height:100vh;padding-top:34px;background:#eef5fc}
.rail{position:fixed;top:34px;bottom:0;width:80px;z-index:5;display:flex;flex-direction:column;align-items:center;padding:17px 8px;background:#edf4fccc;border-right:1px solid var(--line);backdrop-filter:blur(16px)}
.rail img{width:37px;margin-bottom:18px}
.rail button{width:100%;border:0;border-radius:11px;background:none;color:#52657c;padding:8px 2px}
.rail button[aria-current="page"]{background:#dceaff;color:var(--blue)}
.rail svg,.appmain form svg{display:block;width:20px;height:20px;margin:auto;fill:none;stroke:currentColor;stroke-width:1.8}
.rail span{display:block;font-size:11px;margin-top:3px}
.rail em{flex:1}
.apphead{position:fixed;top:47px;left:103px;right:28px;z-index:4;display:flex;justify-content:space-between}
.apphead button{padding:10px 15px;border:1px solid var(--line);border-radius:999px;background:#ffffffd9;color:var(--ink)}
.appmain{max-width:810px;margin:auto;padding:110px 24px 140px}
.view{display:none}
.view.active{display:block}
.assistant{text-align:center;margin-bottom:30px}
.assistant img{width:58px}
.assistant h1,.view h1{font-size:34px;letter-spacing:-.05em}
.thread{max-width:700px;margin:auto}
.message{max-width:75%;margin:10px 0;padding:14px 17px;border-radius:16px}
.message.user{margin-left:auto;background:#dceaff}
.message.dio{background:#fff}
.output{padding:16px;border-radius:16px;background:#1c2a42;color:#fff}
.output button{border:0;border-radius:999px;padding:8px 12px}
.suggestions,.filters{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:20px 0}
.suggestions button,.filters button{border:1px solid var(--line);border-radius:999px;padding:8px 12px;background:#fff;color:#40546d}
.appmain form{position:fixed;z-index:6;bottom:28px;left:calc(50% - 355px);width:710px;display:flex;gap:8px;padding:8px;border:1px solid #ccd9e8;border-radius:999px;background:#fff;box-shadow:0 18px 40px #91a4bd}
.appmain form input{flex:1;border:0;padding:0 8px;outline:none}
.appmain form button{border:0;border-radius:999px;background:#e7f0fb;padding:9px 13px}
.appmain form button[type=submit]{background:var(--blue);color:#fff}
.row{display:flex;justify-content:space-between;gap:15px;padding:16px 0;border-bottom:1px solid var(--line)}
.row button{border:1px solid var(--line);border-radius:999px;padding:7px 11px;background:#fff}
.library-layout{display:grid;grid-template-columns:190px 1fr;gap:24px}
.library-layout aside{display:grid;align-content:start;gap:4px}
.library-layout aside button{border:0;border-radius:9px;background:none;padding:10px;text-align:left}
.library-layout input{width:70%;padding:10px;border:1px solid var(--line);border-radius:10px}
.library-layout>div>button{padding:10px;border:0;border-radius:9px;background:var(--blue);color:#fff}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin-top:18px}
.tile{min-height:175px;text-align:left;color:var(--ink)}
.tile-preview{min-height:100px;padding:10px;border-radius:10px;background:#f4f8fe}
.tile-preview i{display:inline-block;width:28%;padding:12px;margin:2px;background:#dceaff}
.tile-preview table{width:100%;font-size:11px;border-collapse:collapse}
.tile-preview td{border:1px solid #ccd8e8;padding:5px}
.tile-footer{display:block;margin-top:11px;color:#687991}
.dock{display:none}
dialog{width:min(700px,calc(100% - 30px));max-height:80vh;overflow:auto;border:0;border-radius:20px;padding:26px;box-shadow:0 30px 80px #17223855}
dialog::backdrop{background:#17223866}
dialog button{display:block;width:100%;margin:10px 0;padding:10px;border:0;border-radius:10px;background:#eef4fc;text-align:left}
.detail-body table{width:100%;border-collapse:collapse}
.detail-body td,.detail-body th{border:1px solid #ccd8e8;padding:8px}
body.dark{background:#172238;color:#eef6ff}
body.dark #app{background:#172238;color:#eef6ff}
body.dark .todaycard,body.dark .tile,body.dark .library-layout input{background:#24334c;color:#eef6ff}
@media(max-width:720px){.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:end;background:#10203b}
.hero:before{background:linear-gradient(0deg,#0c1c36f0 28%,#0c1c3610 70%),url(assets/dio-reentry-phone-hero.webp) 70% 28%/cover}
.hero nav{top:48px;left:12px;right:12px}
.hero nav a,.hero nav button:not(.pill){display:none}
.hero-copy{z-index:1;padding:0 20px;margin:0 0 86px}
.hero-copy h1{font-size:48px}
.hero-cue{display:none}
.feature-grid,.trust,.stories,.capabilities{grid-template-columns:1fr}
.features,.demo,.stories,.capabilities,.pricing,.faq{padding:70px 17px}
.feature-grid{gap:23px}
.vignette{min-height:290px}
.tiers{grid-template-columns:1fr 1fr}
.tiers article{padding:16px}
.rail{display:none}
.apphead{left:14px;right:14px}
.apphead [data-more]{display:inline-block}
.appmain{padding:100px 17px 130px}
.appmain form{left:14px;right:14px;bottom:72px;width:auto}
.dock{position:fixed;z-index:8;bottom:9px;left:12px;right:12px;display:grid;grid-template-columns:repeat(5,1fr);padding:6px;border:1px solid var(--line);border-radius:999px;background:#ffffffe8;backdrop-filter:blur(16px)}
.dock button{border:0;background:none;padding:9px 2px;font-size:11px;color:#3c516b}
.library-layout{grid-template-columns:1fr}
.library-layout aside{display:flex;overflow:auto}
.library-layout aside button{white-space:nowrap}
.library-layout input{width:65%}
.story-rail article{flex-basis:215px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}
}


/* Integrated state views, accessible controls and responsive layout. */
.reviewbar { height:34px; padding:6px 18px; align-items:center; white-space:nowrap; }

.reviewbar span { display:flex; flex-shrink:0; align-items:center; }

.reviewbar button { margin-left:10px; padding:0; }

.apphead { align-items:center; gap:8px; }

.apphead b { margin:auto; font-size:14px; }

.apphead [data-more] { display:none; }

.appmain { padding-left:54px; }

.appmain form { left:calc(50% - 315px); }

.appmain form:focus-within { outline:2px solid var(--blue); outline-offset:3px; }

.appmain form input { min-width:0; background:transparent; color:inherit; }

.appmain form input:focus-visible { outline:0; }

.view-intro,.assistant p { color:#64758b; }

.view h1:focus { outline:none; }

.view > button,.mini > button { border:1px solid var(--line); border-radius:999px; background:#fff; color:#234e87; padding:11px 17px; min-height:44px; }

button:disabled { cursor:default; opacity:.62; }

.todaycard { margin:20px 0; }

.todaycard > p:first-child { color:#436891; font-size:12px; letter-spacing:.07em; text-transform:uppercase; }

.todaycard p.plain { color:inherit; font-size:15px; letter-spacing:normal; text-transform:none; }

.todaycard small { display:block; color:#607188; margin-top:15px; }

.todaycard > button { border:1px solid var(--line); border-radius:999px; padding:10px 14px; background:#eef5ff; color:#234e87; }

.plan-step { display:flex; align-items:flex-start; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); font-size:15px; }

.plan-step input { flex:0 0 auto; width:18px; height:18px; margin-top:3px; accent-color:var(--blue); }

.four-p-strip { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }

.four-p-strip span { display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:6px 10px; border:1px solid var(--line); border-radius:999px; }

.four-p-strip span::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--p); }

.row { align-items:center; }

.row > span:first-child { min-width:0; }

.row button { min-height:42px; color:inherit; }

.filters { justify-content:flex-start; }

.filters [aria-pressed=true],.library-layout [aria-pressed=true] { color:#165ace; background:#dbeaff; }

.idea-list { border-top:1px solid var(--line); }

.idea-list button { display:flex; justify-content:space-between; gap:20px; width:100%; padding:19px 5px; color:inherit; background:none; border:0; border-bottom:1px solid var(--line); text-align:left; }

.idea-list small { flex-shrink:0; color:#64758b; }

.output { margin:18px 0; }

.output h2 { font-size:22px; }

.output li { margin:10px 0; }

.output button { min-height:44px; color:#172238; }

.library-layout { grid-template-columns:150px minmax(0,1fr); }

.library-layout input { width:100%; margin-bottom:10px; }

.tiles { align-items:start; }

.tile { padding:10px; min-width:0; background:#fff; }

.tile-preview { height:205px; overflow:hidden; padding:15px; border:1px solid #e0e8f2; color:#172238; background:#f5f8fc; }

.tile-preview h3 { font-size:15px; line-height:1.2; margin:0 0 12px; }

.tile-preview p,.tile-preview li { font-size:11px; line-height:1.5; }

.tile-preview ul { padding-left:16px; }

.tile-preview img { width:100%; height:145px; object-fit:cover; border-radius:5px; }

.tile-preview > span { display:block; font-size:11px; }

.tile-footer { margin:12px 4px 4px; }

.tile-footer b { display:block; color:var(--ink); font-size:13px; line-height:1.3; }

.tile-footer small { display:block; margin-top:5px; font-size:11px; }

.slide-frames { display:grid; gap:9px; }

.slide-frames span { display:block; padding:10px; border:1px solid #c7d9ef; border-radius:6px; background:#e8f1fc; font-size:12px; }

.slide-frames b { display:block; font-size:10px; color:#3864a2; }

.sample-note { font-size:12px; color:#64758b; }

.detail-body li { margin:14px 0; }

.detail-body table { font-size:14px; }

.detail-body button { min-height:44px; color:#234e87; }

.detail-body .row b { font-size:13px; }

#detail > [data-close] { width:auto; margin-left:auto; padding:8px 15px; border-radius:999px; }

#composer-note { font-size:13px; color:#416187; padding:12px 0; }

.mini { width:100%; margin:0; padding:20px; }

.mini > small { color:#b7cfe9; }

.mini > button { margin-top:20px; }

.mini h3 { font-size:22px; margin-top:8px; }

.mini-chat .bubble { font-size:14px; max-width:90%; }

.mini-chat .user { color:#fff; }

.mini-chat .dio { background:#e2ecfa; }

.mini-chat .attachment { background:white; font-size:13px; }

.mini-plan,.mini-doc,.mini-status { min-height:235px; padding:20px; }

.mini-plan .four-p-strip { gap:4px; }

.mini-plan .four-p-strip span { padding:3px 5px; font-size:10px; }

.vignette { min-height:400px; }

.story-rail article::after { content:''; position:absolute; inset:40% 0 0; background:linear-gradient(transparent,#07101ddb); pointer-events:none; }

.story-rail span,.story-rail button { z-index:1; }

body.dark { --ink:#eef6ff; --line:#43526b; }

body.dark .rail,body.dark .apphead button,body.dark .dock,body.dark #composer,body.dark .todaycard,body.dark .tile,body.dark .suggestions button,body.dark .filters button,body.dark .row button,body.dark .library-layout input,body.dark dialog { background:#24334c; color:#eef6ff; border-color:#43526b; }

body.dark .rail button,body.dark .dock button,body.dark .library-layout aside button,body.dark .idea-list button { color:#e8f2ff; }

body.dark .message.dio { background:#24334c; }

body.dark .message.user { background:#294976; }

body.dark .view-intro,body.dark .assistant p,body.dark .sample-note,body.dark .idea-list small,body.dark .tile-footer small,body.dark .todaycard small { color:#b8c8dc; }

body.dark .todaycard > p:first-child { color:#9fc9ff; }

body.dark .filters [aria-pressed=true],body.dark .library-layout [aria-pressed=true],body.dark .rail [aria-current=page],body.dark .dock [aria-current=page] { background:#335780; color:white; }

body.dark .detail-body button,body.dark .todaycard > button,body.dark #detail > button { background:#334c70; color:#eef6ff; }

body.dark #composer-note { color:#b8d2f5; }

.dock [aria-current=page] { background:#dbeaff; border-radius:999px; color:#165ace; }

@media (max-width:900px) and (min-width:721px) {
  .appmain { margin-left:80px; padding-left:30px; padding-right:30px; }

  .appmain form { left:104px; right:24px; width:auto; }

  .feature-grid { grid-template-columns:1fr 1fr; gap:24px; }

}

@media (max-width:720px) {
  .reviewbar { height:34px; padding:6px 10px; font-size:10px; }

  .reviewbar button { margin-left:10px; font-size:10px; }

  .apphead { top:45px; padding:0; }

  .apphead b { font-size:12px; }

  .apphead button { padding:8px 11px; font-size:13px; }

  .apphead [data-more] { display:inline-block; }

  .appmain { padding:96px 17px 155px; }

  .appmain form { left:12px; right:12px; bottom:78px; }

  .appmain form button { padding:10px; }

  .appmain form input { font-size:16px; }

  .assistant h1,.view h1 { font-size:31px; }

  .message { max-width:90%; }

  .row { gap:10px; font-size:14px; }

  .row button { font-size:12px; }

  .library-layout { grid-template-columns:minmax(0,1fr); }

  .tile-preview { padding:10px; height:190px; }

  .tile-preview h3 { font-size:13px; }

  .tiles { gap:10px; }

  .vignette { padding:18px; }

  .mini { padding:14px; }

  .mini-plan,.mini-doc,.mini-status { padding:15px; }

  .idea-list small { font-size:11px; }

  .demo-product { grid-template-columns:30px minmax(0,1fr); gap:15px; padding:18px; }

  .demo-product .bubble { max-width:95%; }

  dialog { padding:20px; }

}

@media (max-width:720px) {
  .hero { display:block; min-height:0; padding:470px 0 55px; }
  .hero::before { top:34px; bottom:auto; height:470px; background:linear-gradient(0deg,#10203b 0%,transparent 45%),url(assets/dio-reentry-phone-hero.webp) right top / auto 470px no-repeat; }
  .hero-copy { margin:0; padding:0 24px; }
  .hero-copy h1 { font-size:46px; }
  .hero-copy > p:nth-of-type(2) { font-size:16px; }
}
.reviewbar { background:#172238; }
.tiers details { border-top:1px solid var(--line); margin-top:20px; padding-top:12px; font-size:13px; }
.tiers summary { cursor:pointer; font-weight:600; }
.tiers ul { padding-left:17px; color:#52647b; }
.tiers li { margin:8px 0; }
.tiers strong .period { font-size:12px; font-weight:400; letter-spacing:0; }
.has-thread .assistant { text-align:left; margin:0 0 30px; }
.has-thread .assistant img { display:none; }
.has-thread .assistant h1 { font-size:26px; margin:12px 0; }
.has-thread .assistant p { font-size:13px; }
@media (min-width:721px) {
  .hero::before { background-position:right center; }
}

/* The public proof uses the current local product capture. */
.demo-product.real-product{display:block;width:100%;padding:0;overflow:hidden;border:1px solid #7ba9ce55;position:relative;text-align:left;cursor:pointer}.real-product>img{width:100%;height:auto;display:block}.real-product>span{position:absolute;bottom:20px;left:25px;padding:11px 19px;background:#ffffffee;color:#142b40;border-radius:99px;font-size:12px;font-weight:650;box-shadow:0 4px 24px #0005}

.reviewbar a{color:#fff;font:inherit;margin-left:10px;text-decoration:underline}
@media(max-width:650px){.experience-active>.reviewbar{gap:4px}.experience-active>.reviewbar>span{white-space:nowrap}.experience-active>.reviewbar button,.experience-active>.reviewbar a{margin-left:7px}}