/* DRYVE Preview v7.8 — real screenshot walkthrough.
   No edits to screenshots; all images reused directly from the approved feature assets. */
#app-tour{
 position:relative;isolation:isolate;overflow:hidden;
 padding:clamp(78px,9vw,130px) 0;
 background:linear-gradient(145deg,#071617 0%,#0b2425 52%,#071417 100%);
 border-block:1px solid rgba(101,208,188,.13);
}
#app-tour::before{
 content:"";position:absolute;z-index:-1;pointer-events:none;
 width:100%;height:110%;top:0;left:0;
 background:radial-gradient(ellipse 50% 55% at 80% 48%,rgba(34,151,138,.13),transparent 78%);
}
#app-tour *{box-sizing:border-box}
#app-tour .tour-wrap{
 display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
 align-items:center;gap:clamp(38px,6vw,100px)
}
#app-tour .tour-copy,#app-tour .tour-stage{min-width:0}
#app-tour .tour-kicker{font-size:11px;font-weight:950;letter-spacing:2.1px;color:#65e4d2;margin:0}
#app-tour h2{
 font-size:clamp(50px,5.3vw,86px);line-height:.96;font-weight:950;
 letter-spacing:-.058em;color:#f4fbf8;margin:19px 0 24px
}
#app-tour h2 em{font-style:normal;color:#64e5d4}
#app-tour .tour-intro{
 font-size:15px;line-height:1.75;color:#b5d0c8;max-width:500px;margin:0
}
#app-tour .tour-tabs{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:29px 0 22px;
}
#app-tour .tour-tab{
 appearance:none;background:rgba(19,49,47,.53);border:1px solid rgba(100,183,173,.25);
 border-radius:13px;color:#cce0d9;cursor:pointer;display:flex;
 align-items:center;gap:12px;text-align:left;min-width:0;min-height:72px;padding:14px 16px;
 transition:background .18s,border-color .18s,color .18s,transform .18s;
}
#app-tour .tour-tab span{display:block}
#app-tour .tour-tab-number{font-size:11px;letter-spacing:1px;font-weight:950;color:#69daca;flex:0 0 auto}
#app-tour .tour-tab-label{font-size:13px;line-height:1.25;font-weight:900;min-width:0}
#app-tour .tour-tab[aria-selected="true"]{
 color:#071d1a;background:#69e4d2;border-color:#69e4d2;
 box-shadow:0 10px 31px rgba(35,204,181,.11)
}
#app-tour .tour-tab[aria-selected="true"] .tour-tab-number{color:#195c55}
#app-tour .tour-tab:hover:not([aria-selected="true"]){
 color:#f4fbf8;background:#193f3c;border-color:#65cabb;transform:translateY(-1px)
}
#app-tour .tour-tab:focus-visible,#app-tour button:focus-visible,
#app-tour a:focus-visible{outline:2px solid #a0ffeb;outline-offset:4px}
#app-tour .tour-active-detail{
 border-left:2px solid #69e4d2;padding:1px 0 0 19px;margin:21px 0 0;min-height:112px
}
#app-tour .tour-active-detail .tour-detail-line{
 display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px;
}
#app-tour .tour-active-detail strong{font-size:19px;line-height:1.25;color:#fff;letter-spacing:-.02em}
#app-tour .tour-tag{
 display:inline-flex;align-items:center;border-radius:6px;border:1px solid rgba(101,230,213,.37);
 padding:5px 8px;font-size:9px;font-weight:950;letter-spacing:1px;color:#79e9d9;
 white-space:nowrap;
}
#app-tour .tour-tag[data-tier="pro"]{border-color:rgba(194,146,253,.55);color:#c4a7ff;background:rgba(99,53,137,.13)}
#app-tour .tour-tag[data-tier="mixed"]{border-color:rgba(229,186,93,.45);color:#f9d186;background:rgba(126,85,27,.12)}
#app-tour .tour-active-detail p{
 font-size:13px;line-height:1.7;color:#b8d1ca;max-width:460px;margin:0
}
#app-tour .tour-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:21px}
#app-tour .tour-actions a{color:#6fecd9;font-size:11px;font-weight:900;letter-spacing:.9px;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(108,232,211,.45);padding-bottom:6px}
#app-tour .tour-actions a:hover{color:#f4fbf8}
#app-tour .tour-explainer{
 color:#8fafa7;font-size:11px;line-height:1.65;margin:22px 0 0;max-width:480px
}
#app-tour .tour-stage{position:relative;display:flex;align-items:stretch;justify-content:center}
#app-tour .tour-frame{
 width:min(100%,580px);border:1px solid rgba(95,220,199,.34);
 border-radius:24px;overflow:hidden;
 background:linear-gradient(140deg,#102e2e 0%,#0b2124 65%,#09191b 100%);
 box-shadow:0 28px 85px rgba(0,0,0,.22),inset 0 1px 0 rgba(133,238,221,.09);
}
#app-tour .tour-frame-header{
 display:flex;justify-content:space-between;align-items:center;gap:12px;
 min-height:58px;padding:0 24px;background:rgba(4,22,23,.42);
 border-bottom:1px solid rgba(102,206,190,.18);
 font-size:10px;font-weight:900;letter-spacing:1.5px;color:#96c8bc;
}
#app-tour .tour-frame-header strong{color:#75e5d4;font-size:10px;font-weight:950;white-space:nowrap}
#app-tour .tour-viewport{
 display:flex;position:relative;align-items:center;justify-content:center;
 height:clamp(390px,43vw,575px);min-height:0;width:100%;
 background:radial-gradient(ellipse 64% 68% at 49% 48%,rgba(40,176,159,.18),transparent 80%);
 overflow:hidden;touch-action:pan-y;
}
#app-tour .tour-viewport::after{
 content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
 background:linear-gradient(135deg,rgba(99,219,201,.025) 0%,transparent 50%,rgba(0,0,0,.05) 100%)
}
#app-tour .tour-image{
 display:block;max-width:calc(100% - 30px);max-height:calc(100% - 24px);
 width:auto;height:auto;object-fit:contain;object-position:center;
 box-shadow:none;border:none;border-radius:0;filter:none;
 transition:opacity .18s ease,transform .24s ease;
}
#app-tour .tour-image.is-changing{opacity:.32;transform:scale(.98)}
#app-tour .tour-image[hidden]{display:none}
#app-tour .tour-load{
 max-width:80%;color:#afcfc5;font-size:13px;line-height:1.6;text-align:center
}
#app-tour .tour-load[hidden]{display:none}
#app-tour .tour-frame-footer{
 display:flex;align-items:center;justify-content:space-between;gap:12px;
 min-height:69px;padding:12px 20px;
 background:rgba(4,22,23,.47);border-top:1px solid rgba(102,206,190,.18);
}
#app-tour .tour-frame-note{font-size:10px;line-height:1.5;color:#a4c7bc;max-width:180px}
#app-tour .tour-controls{display:flex;align-items:center;gap:9px;flex:0 0 auto}
#app-tour .tour-arrow,#app-tour .tour-zoom{
 appearance:none;background:#173531;color:#dbf6ed;border:1px solid rgba(126,214,200,.38);
 border-radius:11px;font-size:12px;font-weight:900;cursor:pointer;
 display:inline-flex;align-items:center;justify-content:center;
 min-height:40px;min-width:40px;padding:8px 12px;transition:background .15s,border-color .15s
}
#app-tour .tour-arrow:hover,#app-tour .tour-zoom:hover{background:#246158;border-color:#7ae7d4}
#app-tour .tour-zoom{letter-spacing:.3px;font-size:11px;min-width:0}
#app-tour .tour-progress-track{height:3px;background:#143a36;position:relative}
#app-tour .tour-progress-bar{height:100%;width:25%;background:#62e6d3;transition:width .25s ease}
#dryve-tour-dialog{
 box-sizing:border-box;max-width:min(940px,94vw);width:auto;max-height:91vh;overflow:hidden;
 padding:0;border:1px solid rgba(119,232,211,.55);border-radius:20px;
 background:#091719;color:#fff;
 box-shadow:0 30px 100px rgba(0,0,0,.55)
}
#dryve-tour-dialog::backdrop{background:rgba(1,13,14,.84);backdrop-filter:blur(6px)}
#dryve-tour-dialog .tour-modal-bar{
 display:flex;align-items:center;justify-content:space-between;gap:20px;
 padding:13px 18px;border-bottom:1px solid #244f49;color:#cde3dc;
 font-size:13px;font-weight:850
}
#dryve-tour-dialog .tour-modal-close{
 appearance:none;border:1px solid #3b7770;background:#14342f;color:#fff;
 border-radius:8px;min-height:38px;padding:6px 15px;font-size:12px;font-weight:800;cursor:pointer
}
#dryve-tour-dialog .tour-modal-body{
 display:flex;align-items:flex-start;justify-content:center;overflow:auto;
 max-height:calc(91vh - 67px);padding:18px;
 background:radial-gradient(ellipse at 50% 30%,#133532,#091719 76%);
}
#dryve-tour-dialog .tour-modal-body img{display:block;max-width:100%;height:auto;max-height:none}
@media(max-width:1020px){
 #app-tour .tour-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
 #app-tour .tour-tab{min-height:64px;padding:12px}
 #app-tour .tour-viewport{height:530px}
}
@media(max-width:800px){
 #app-tour .tour-wrap{grid-template-columns:1fr;gap:38px}
 #app-tour .tour-intro{max-width:640px}
 #app-tour .tour-stage{grid-row:2}
 #app-tour .tour-frame{max-width:630px}
 #app-tour .tour-viewport{height:min(74vw,550px);min-height:390px}
}
@media(max-width:600px){
 #app-tour .tour-tabs{
   display:flex;gap:8px;margin:24px -17px 18px;
   padding:3px 17px 12px;overflow-x:auto;overscroll-behavior-inline:contain;
   scroll-snap-type:x proximity;scrollbar-width:thin;
   scrollbar-color:rgba(103,222,204,.5) transparent;
 }
 #app-tour .tour-tab{flex:0 0 auto;min-height:53px;max-width:175px;padding:10px 13px;gap:8px;scroll-snap-align:center}
 #app-tour .tour-tab-number{font-size:10px}
 #app-tour .tour-tab-label{font-size:12px}
 #app-tour .tour-viewport{height:min(100vw,495px);min-height:335px}
 #app-tour .tour-frame{border-radius:17px}
 #app-tour .tour-frame-header{padding:0 16px;min-height:49px}
 #app-tour .tour-frame-footer{padding:10px 12px;min-height:64px}
 #app-tour .tour-zoom{min-height:38px;padding:7px 9px}
 #app-tour .tour-arrow{min-height:38px;min-width:38px;padding:7px}
 #app-tour .tour-frame-note{font-size:9px;max-width:130px}
 #app-tour .tour-active-detail{min-height:0}
}
@media(max-width:360px){
 #app-tour .tour-viewport{min-height:290px}
 #app-tour .tour-frame-note{max-width:105px}
 #app-tour .tour-controls{gap:5px}
}
@media(prefers-reduced-motion:reduce){
 #app-tour .tour-tab,#app-tour .tour-image,#app-tour .tour-progress-bar{transition:none!important}
}