/* v2 (23 Oct 2026, after the first look): phones are ALWAYS full size and overlap a little like the landing page; more app views; tool cards with a small picture; a contained sign-up panel. Loaded after demo.css. */
.dm-phone{width:286px;max-width:none;flex:none}
@media (max-width:340px){.dm-phone{zoom:.88}}
/* two phones that overlap a little, never squeezed */
.tp-demo-p{display:flex;flex-wrap:nowrap;gap:0;justify-content:center;align-items:flex-start;padding-right:0}
.tp-demo-p .dm-phone{max-width:none}
.tp-demo-p .dm-phone:nth-child(2){margin-left:-14px;margin-top:56px;position:relative;z-index:2}
.tp-demo-in{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
@media (max-width:1100px){.tp-demo-in{grid-template-columns:minmax(0,1fr)}.tp-demo-p{padding-bottom:0}}
@media (max-width:700px){.tp-demo-p{flex-direction:column;align-items:center;gap:22px}.tp-demo-p .dm-phone:nth-child(2){margin:0}}
/* the hero phone on a hub never shrinks either */
.dm-hero{min-width:0}.dm-hero .dm-phone{width:286px}
@media (max-width:860px){.dm-herochips{display:none}}
/* new app pieces */
.dm-ringwrap{position:relative;display:flex;justify-content:center;margin:4px 0}.dm-ringwrap svg{display:block}
.dm-rtxt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.dm-rtxt b{font-size:28px;letter-spacing:-.03em;line-height:1}.dm-rtxt small{font-size:11px;color:#64748b;margin-top:3px}
.dm-trend{background:#fff;border:1px solid #ece9fb;border-radius:14px;padding:12px}.dm-trend small{display:block;font-size:11px;color:#64748b;font-weight:700}.dm-trend b{display:block;font-size:30px;letter-spacing:-.03em;line-height:1.15}.dm-trend>span{display:block;font-size:12px;color:#15803d;font-weight:700;margin-bottom:6px}
.dm-axis{display:flex;justify-content:space-between;font-size:10px;color:#94a3b8;margin-top:2px}
.dm-task{background:#fff;border:1px solid #ece9fb;border-radius:12px;padding:10px 12px;text-align:center}.dm-task small{display:block;font-size:10.5px;color:#64748b;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.dm-task b{font-size:14px}
.dm-ctl{display:flex;gap:8px;justify-content:center}.dm-ctl span{flex:1;text-align:center;font-size:12.5px;font-weight:800;padding:10px 6px;border-radius:99px;background:#fff;border:1px solid #e0dafb;color:#475569}.dm-ctl span.main{background:#7c5cff;color:#fff;border-color:#7c5cff;box-shadow:0 10px 20px -10px rgba(124,92,255,.8)}
.dm-cal{background:#fff;border:1px solid #ece9fb;border-radius:14px;padding:10px}.dm-dows,.dm-cells{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}.dm-dows span{font-size:10px;font-weight:800;color:#94a3b8}
.dm-cells{margin-top:5px}.dm-cells i{font-style:normal;font-size:10.5px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#f3f1ff;color:#64748b}.dm-cells i:first-child{grid-column-start:calc(var(--off) + 1)}
.dm-cells i.on{background:#7c5cff;color:#fff;font-weight:800}.dm-cells i.rest{background:#e0f2fe;color:#0369a1}.dm-cells i.future{background:transparent;color:#cbd5e1}.dm-cells i.now{outline:2px solid #c026d3;outline-offset:1px}
.dm-key{display:flex;gap:14px;font-size:11px;color:#64748b}.dm-key i{display:inline-block;width:10px;height:10px;border-radius:3px;background:#7c5cff;margin-right:5px;vertical-align:-1px}.dm-key i.rest{background:#7dd3fc}
.dm-lab{margin:2px 0 -4px;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#5b3fe0}
.dm-f.big{flex-direction:column;align-items:flex-start;gap:3px}.dm-f.big span{font-size:14px;font-weight:700;line-height:1.35}
.dm-chip.on{background:#7c5cff;color:#fff}
.dm-aff{border-radius:18px;padding:22px 18px;text-align:center;border:1px solid #e9d5ff;min-height:190px;display:flex;flex-direction:column;justify-content:center;gap:10px}.dm-aff small{font-size:11px;font-weight:800;color:#7c3aed;letter-spacing:.1em;text-transform:uppercase}.dm-aff p{margin:0;font-size:25px;line-height:1.3;color:#3b0764}.dm-aff span{font-size:11px;color:#7c3aed}
.dm-tg{display:grid;gap:6px}.dm-tgi{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #ece9fb;border-radius:12px;padding:9px 11px;cursor:pointer}.dm-tgi input{position:absolute;opacity:0;pointer-events:none}.dm-sw{flex:none;width:36px;height:21px;border-radius:21px;background:#d9d4f5;position:relative;transition:.15s}.dm-sw:after{content:"";position:absolute;left:2px;top:2px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.15s}.dm-tgi input:checked~.dm-sw{background:#7c5cff}.dm-tgi input:checked~.dm-sw:after{left:17px}
.dm-breathe{position:relative;height:190px;display:flex;align-items:center;justify-content:center}.dm-breathe i{position:absolute;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-style:normal}
.dm-breathe .r3{width:176px;height:176px;background:rgba(124,92,255,.08)}.dm-breathe .r2{width:140px;height:140px;background:rgba(124,92,255,.15)}.dm-breathe .r1{width:100px;height:100px;background:linear-gradient(135deg,#7c5cff,#c026d3);color:#fff;text-align:center}.dm-breathe b{font-size:13px}.dm-breathe small{font-size:26px;font-weight:800;line-height:1}
.dm-bt{margin:0;text-align:center;font-size:12.5px;color:#64748b}
/* tool cards with a small picture (hubs and landing) */
.tile.has-img{padding:0;overflow:hidden;display:flex;flex-direction:column}
.tile-img{display:block;width:100%;height:170px;object-fit:cover;object-position:top center;background:linear-gradient(135deg,#f5f3ff,#fdf2f8);border-bottom:1px solid var(--rule)}
.tile.has-img b,.tile.has-img span{padding:0 18px}.tile.has-img b{padding-top:14px}.tile.has-img span{padding-bottom:16px}
.tiles.with-img{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
/* the sign-up panel: contained, its own background, lower on hub pages */
.signup-panel .row.first{background:linear-gradient(135deg,#ede9fe 0%,#fce7f3 100%);border:1px solid #ddd6fe;border-radius:26px;padding:42px 44px;box-shadow:0 30px 60px -36px rgba(91,63,224,.5)}
.signup-panel .tag{background:#fff}
@media (max-width:860px){.signup-panel .row.first{padding:26px 20px;border-radius:20px}}
/* v3 (23 Oct 2026, second look): tag pill, half height bands, a colour for each calculator row, thumbnails on every card */
.signup-panel .tag{display:inline-block;background:#fff;color:#5b3fe0;border-radius:99px;padding:6px 14px;margin-bottom:14px}
.cband{padding:0;margin:34px 0}
.cband .cb-in{display:flex;align-items:center;gap:22px;border-radius:20px;padding:22px 28px;min-height:96px}
.cband .cb-t{flex:1;min-width:0;display:grid;gap:3px}.cband .cb-t b{font-size:clamp(17px,2vw,21px);line-height:1.25;letter-spacing:-.01em}.cband .cb-t span{font-size:14.5px;line-height:1.45;opacity:.82}
.cband .btn{flex:none;white-space:nowrap}
.cb-pics{display:flex;flex:none}.cb-pics img{width:96px;height:76px;object-fit:cover;object-position:top center;border-radius:12px;border:3px solid #fff;box-shadow:0 8px 18px -8px rgba(30,20,80,.45);margin-left:-18px;background:#fff}.cb-pics img:first-child{margin-left:0}
.cb-violet .cb-in{background:linear-gradient(120deg,#6d4cf5,#a855f7);color:#fff}.cb-violet .btn{background:#fff;color:#4c2fd0;box-shadow:none}
.cb-sky .cb-in{background:linear-gradient(120deg,#e0f2fe,#ede9fe);color:#0f172a;border:1px solid #bae6fd}
.cb-rose .cb-in{background:linear-gradient(120deg,#fce7f3,#ffe4e6);color:#4a0d2a;border:1px solid #fbcfe8}
.cb-teal .cb-in{background:linear-gradient(120deg,#ccfbf1,#e0f2fe);color:#06403a;border:1px solid #99f6e4}
.cb-amber .cb-in{background:linear-gradient(120deg,#fef3c7,#ffedd5);color:#451a03;border:1px solid #fde68a}
@media (max-width:760px){.cband .cb-in{flex-direction:column;align-items:flex-start;gap:14px;padding:20px}.cb-pics img{width:80px;height:64px}}
/* calculator rows: a colour each */
.dm-row{--rc:#7c5cff;--rs:#f5f3ff;--rt:#ede9fe;background:linear-gradient(135deg,var(--rs),#fff 55%);border-color:var(--rt)}
.dm-row:nth-child(5n+2){--rc:#e11d74;--rs:#fdf2f8;--rt:#fbcfe8}
.dm-row:nth-child(5n+3){--rc:#0d9488;--rs:#f0fdfa;--rt:#99f6e4}
.dm-row:nth-child(5n+4){--rc:#d97706;--rs:#fffbeb;--rt:#fde68a}
.dm-row:nth-child(5n+5){--rc:#0284c7;--rs:#f0f9ff;--rt:#bae6fd}
.dm-row .btn.p{background:var(--rc);box-shadow:0 12px 24px -12px var(--rc)}
.dm-row .dm-tag{background:var(--rt);color:var(--rc)}
.dm-row .dm-rt li:before{background:var(--rt);color:var(--rc)}
.dm-row .dm-rp,.dm-row:nth-child(odd) .dm-rp{background:radial-gradient(280px 240px at 50% 45%,var(--rt),transparent 72%)}
.dm-row .dm-screen{min-height:470px}
/* phone: picture cards sit two across, so a row of tools is one glance and not a long scroll */
@media (max-width:560px){.tiles.with-img{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tile-img{height:120px}.tile.has-img b{padding:10px 12px 0;font-size:14.5px}.tile.has-img span{padding:2px 12px 12px;font-size:12.5px;line-height:1.4}}