/* Clivon tour. Tokens follow the public landings (Gold Canonical: ivory, ink,
   metal gold, Manrope + Cormorant Garamond). Desktop (>= 900px) keeps the
   browser window; narrow screens show a realistic iPhone that fills the width. */
:root{color-scheme:light;--tour-bg:#f2ede3;--tour-panel:#fffcf5;--tour-ink:#1b1810;--tour-muted:#675f50;--tour-line:rgba(109,67,22,.17);--tour-line-gold:rgba(160,110,38,.42);--tour-accent:#855519;--tour-gold:#bd8730;--tour-shade:rgba(27,21,11,.2);--tour-shadow:0 22px 60px -26px rgba(52,36,12,.38),0 2px 8px rgba(52,36,12,.06);--tour-metal:linear-gradient(108deg,#6d4316 0%,#a56f24 20%,#d0a34e 39%,#f1d99f 51%,#c28b31 67%,#8b571b 84%,#d8ae5a 100%);--tour-metal-ink:#140f08;--tour-ghost:rgba(189,135,48,.08);--screen-bg:#edeae2;--tour-sans:Manrope,"Helvetica Neue",Arial,sans-serif;--tour-serif:"Cormorant Garamond","Iowan Old Style",Georgia,serif;--bar-height:68px;--notice-height:36px;--viewport-height:100vh;--phone-scale:1;--sheet-native:0px;font-family:var(--tour-sans)}
:root[data-theme=dark]{color-scheme:dark;--tour-bg:#070909;--tour-panel:#121414;--tour-ink:#f3eee4;--tour-muted:#b3ada1;--tour-line:rgba(243,238,228,.12);--tour-line-gold:rgba(198,145,52,.5);--tour-accent:#e6c36f;--tour-gold:#d2a653;--tour-shade:rgba(0,0,0,.4);--tour-shadow:0 26px 70px -24px rgba(0,0,0,.75),0 0 0 1px rgba(198,145,52,.08);--tour-ghost:rgba(215,174,87,.07);--screen-bg:#071011}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--tour-bg);color:var(--tour-ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,a{font:inherit;-webkit-tap-highlight-color:transparent}
button,a.tour-primary{cursor:pointer}
button,.tour-bar a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 12px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--tour-ink);font-size:12px;font-weight:500;letter-spacing:.01em;text-decoration:none;transition:background .18s,border-color .18s,color .18s}
button:hover,.tour-bar a:hover{background:var(--tour-ghost);border-color:var(--tour-line)}
button:disabled{opacity:.35;cursor:default}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--tour-gold);outline-offset:3px}
[hidden]{display:none!important}

/* Header */
.tour-bar{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:24px;height:var(--bar-height);padding:12px 30px;background:var(--tour-bg);border-bottom:1px solid var(--tour-line)}
.tour-bar img{width:119px;height:auto;object-fit:contain}
.tour-title{display:flex;align-items:center;gap:12px;padding-left:24px;border-left:1px solid var(--tour-line);font-size:12px;white-space:nowrap}
.tour-title strong{font-weight:500}
.tour-title span{color:var(--tour-accent);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.tour-progress{min-width:120px;margin-left:auto;color:var(--tour-muted);font-size:10px;font-variant-numeric:tabular-nums}
progress{display:block;width:100%;height:2px;margin-top:7px;border:0;accent-color:var(--tour-gold)}
progress::-webkit-progress-bar{background:var(--tour-line)}
progress::-webkit-progress-value{background:var(--tour-metal)}
.tour-bar nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.tour-bar nav [data-play]{margin-right:8px;border-color:var(--tour-line-gold);color:var(--tour-accent)}
.tour-bar nav [data-play] span[aria-hidden]{font-size:16px;line-height:1}
.theme-icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.icon-moon{fill:currentColor;stroke:none}
.icon-sun,:root[data-theme=dark] .icon-moon{display:none}
:root[data-theme=dark] .icon-sun{display:block}

/* Persistent notice */
.tour-notice{position:fixed;right:0;bottom:0;left:0;z-index:20;min-height:var(--notice-height);margin:0;padding:10px 20px;background:var(--tour-bg);color:var(--tour-muted);font-size:10px;line-height:1.5;text-align:center}

/* Desktop: browser window */
.presentation{position:fixed;inset:var(--bar-height) 0 var(--notice-height);display:flex;align-items:center;justify-content:center;padding:14px 30px 8px}
.device{position:relative;display:flex;flex-direction:column;width:100%;max-width:1680px;height:100%;overflow:hidden;border:1px solid var(--tour-line);border-radius:12px;background:var(--tour-panel);box-shadow:var(--tour-shadow)}
.browser-chrome{display:flex;flex:none;align-items:center;gap:12px;height:36px;padding:0 15px;border-bottom:1px solid var(--tour-line);background:var(--tour-panel);color:var(--tour-muted);font-size:10px}
.window-controls{display:flex;flex:1;gap:6px}
.window-controls i{width:7px;height:7px;border-radius:50%;background:var(--tour-line)}
.window-title{letter-spacing:.02em}
.window-title span{padding-left:7px;opacity:.6}
.window-state{display:flex;flex:1;align-items:center;justify-content:flex-end;gap:6px;font-size:9px}
.window-state i{width:5px;height:5px;border-radius:50%;background:var(--tour-gold)}
.phone-top,.phone-bottom,.phone-sheet,.phone-button{display:none}
.device-screen{position:relative;flex:1;width:100%;min-height:0;overflow:hidden;background:var(--screen-bg)}
.device-viewport{position:absolute;inset:0;overflow:hidden}
iframe{display:block;width:100%;height:100%;border:0;background:var(--screen-bg)}

/* Focus layers */
.tour-shade{position:fixed;z-index:3;background:var(--tour-shade);touch-action:none}
.tour-focus{position:fixed;z-index:4;border:1.5px solid var(--tour-gold);border-radius:6px;box-shadow:0 0 0 4px rgba(210,166,83,.18),0 0 24px rgba(210,166,83,.18);pointer-events:none}
.tour-beacon{position:absolute;top:-6px;right:-6px;width:12px;height:12px;border:3px solid var(--tour-panel);border-radius:50%;background:var(--tour-gold)}
.tour-beacon:after{position:absolute;inset:-7px;border:1px solid var(--tour-gold);border-radius:50%;content:"";animation:tour-pulse 1.7s ease-out infinite}
.tour-cursor{position:fixed;z-index:9;width:25px;height:29px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.22));pointer-events:none}
.tour-cursor svg{width:100%;height:100%;overflow:visible}
.tour-cursor path{fill:var(--tour-panel);stroke:var(--tour-gold);stroke-width:1.5;stroke-linejoin:round}

/* Guide */
.tour-tooltip{position:fixed;z-index:8;width:320px;padding:18px 20px 14px;border:1px solid var(--tour-line-gold);border-radius:12px;background:var(--tour-panel);box-shadow:var(--tour-shadow);outline:none!important}
.tour-tooltip:before{position:absolute;width:10px;height:10px;border:1px solid var(--tour-line-gold);background:var(--tour-panel);content:"";transform:rotate(45deg)}
.tour-tooltip[data-placement=bottom]:before{top:-6px;left:var(--arrow,24px);border-right:0;border-bottom:0}
.tour-tooltip[data-placement=top]:before{bottom:-6px;left:var(--arrow,24px);border-top:0;border-left:0}
.tour-tooltip[data-placement=right]:before{top:var(--arrow,24px);left:-6px;border-top:0;border-right:0}
.tour-tooltip[data-placement=left]:before{top:var(--arrow,24px);right:-6px;border-bottom:0;border-left:0}
.guide-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.tour-chapter{display:block;color:var(--tour-accent);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.guide-step{color:var(--tour-muted);font-size:10px;font-variant-numeric:tabular-nums}
.tour-status{display:inline-flex;align-items:center;gap:6px;margin-bottom:2px;padding:3px 9px 3px 7px;border:1px solid var(--tour-line-gold);border-radius:999px;color:var(--tour-accent);font-size:10px;font-weight:600;line-height:1.2}
.tour-status:before{width:5px;height:5px;border-radius:50%;background:var(--tour-gold);content:""}
.tour-tooltip h1{margin:6px 0 8px;font:500 27px/1.05 var(--tour-serif);letter-spacing:-.01em}
.tour-tooltip p{margin:0 0 14px;color:var(--tour-muted);font-size:13px;line-height:1.6}
.tour-step-actions{display:flex;align-items:center;gap:8px}
.tour-step-actions button{min-height:38px;padding:8px 12px;font-size:12px}
.tour-step-actions [data-back]{flex-shrink:0;width:38px;padding:0;border-color:var(--tour-line);font-size:16px}
.tour-step-actions [data-skip]{margin-left:auto;padding:6px 2px;color:var(--tour-muted);font-size:11px}
.tour-step-actions{flex-wrap:wrap}
.tour-step-actions [data-next]{flex-shrink:0;padding:10px 14px;white-space:nowrap;letter-spacing:.07em}
.tour-step-actions [data-skip]{white-space:nowrap}
.tour-step-actions [data-retry]{border-color:var(--tour-line-gold);color:var(--tour-accent)}
.tour-primary,a.tour-primary{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:44px;padding:12px 18px;overflow:hidden;border:1px solid #c59135;border-radius:6px;background:var(--tour-metal);box-shadow:inset 0 1px rgba(255,245,211,.34),inset 0 -1px rgba(66,38,10,.46),0 12px 30px -14px rgba(108,63,16,.5);color:var(--tour-metal-ink);font-size:11px;font-weight:700;letter-spacing:.12em;text-decoration:none;text-transform:uppercase}
.tour-primary:hover,a.tour-primary:hover{border-color:#c59135;background:var(--tour-metal);filter:brightness(1.07)}
.tour-click-hint{flex:1;color:var(--tour-accent);font-size:11px;font-weight:600;line-height:1.4}
.tour-recovery{padding:9px 11px;border-left:2px solid var(--tour-gold);background:var(--tour-ghost)}
[data-details-toggle]{display:none}

/* Dialogs */
dialog{border:1px solid var(--tour-line-gold);border-radius:14px;background:var(--tour-panel);box-shadow:0 30px 100px rgba(0,0,0,.28);color:var(--tour-ink)}
dialog::backdrop{background:rgba(12,10,6,.42);backdrop-filter:blur(4px)}
.tour-modal{width:calc(100% - 32px);max-width:540px;padding:40px}
.tour-modal h2{max-width:380px;margin:20px 0 16px;font:500 46px/1 var(--tour-serif);letter-spacing:-.02em}
.tour-modal p{color:var(--tour-muted);font-size:14px;line-height:1.65}
.tour-modal .tour-duration{margin:22px 0;color:var(--tour-accent);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.tour-modal .tour-modal-notice{margin-bottom:24px;padding-top:16px;border-top:1px solid var(--tour-line);font-size:11px}
.welcome-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.welcome-actions [data-watch]{border-color:var(--tour-line-gold);color:var(--tour-accent);font-size:12px}
.tour-drawer{position:fixed;inset:0 0 0 auto;width:min(380px,100%);max-width:100%;height:100%;max-height:100%;margin:0;padding:26px;border-width:0 0 0 1px;border-radius:0}
.tour-drawer-head{display:flex;align-items:center;justify-content:space-between}
.tour-drawer h2{margin:0;font:500 34px/1.05 var(--tour-serif);letter-spacing:-.01em}
.tour-drawer p{color:var(--tour-muted);font-size:12px;line-height:1.6}
[data-chapter-list]{display:grid;gap:2px;margin:24px 0}
[data-chapter-list] button{justify-content:space-between;padding:16px 2px;border-bottom:1px solid var(--tour-line);border-radius:0;font-size:14px;text-align:left}
[data-chapter-list] button[aria-current=true]{color:var(--tour-accent);font-weight:700}
.tour-roadmap{margin:24px 0;padding:0;list-style:none}
.tour-roadmap li{padding:13px 0;border-bottom:1px solid var(--tour-line);font-size:14px}
.tour-roadmap small{display:block;margin-top:4px;color:var(--tour-muted);font-size:11px}
.tour-modal [data-restart]{margin-top:12px}
@keyframes tour-pulse{from{opacity:.7;transform:scale(.5)}to{opacity:0;transform:scale(1.5)}}

/* Narrow screens: a realistic iPhone 17 Pro Max. The room renders inside a
   fixed 440x956 CSS screen (status bar + app viewport + guide sheet), and
   only the outer chassis is scaled (transform) so it fills the available
   width/height. tour.js reads live rects, which already include the scale, so
   cutouts, taps and the cursor stay aligned. The guide sheet lives in the
   phone's own lower screen area: it never covers the app nor shrinks the
   device; opening "Detalhes" rises over the app like an iOS sheet. */
@media(max-width:899px){
  :root{--bar-height:calc(52px + env(safe-area-inset-top,0px));--notice-height:40px;--phone-w:440px;--phone-h:956px;--phone-bezel:10px;--phone-radius:66px;--phone-screen-radius:56px;--status-height:54px;--viewport-height:100dvh}
  .tour-bar{gap:8px;padding:calc(4px + env(safe-area-inset-top,0px)) max(10px,env(safe-area-inset-right,0px)) 4px max(12px,env(safe-area-inset-left,0px))}
  .tour-bar img{width:86px}
  .tour-title{display:block;flex:1;min-width:0;padding:0;border:0}
  .tour-title strong,.tour-progress,.tour-bar .control-copy{display:none}
  .tour-title span{font-size:9px}
  .tour-bar nav{gap:0}
  .tour-bar nav button,.tour-bar nav a{min-width:40px;min-height:44px;padding:6px 8px;font-size:12px}
  .tour-bar nav [data-play]{width:40px;margin:0;padding:4px;border-color:transparent}
  .tour-notice{padding:6px 12px calc(6px + env(safe-area-inset-bottom,0px));font-size:9px;line-height:1.4}
  .presentation{top:var(--bar-height);bottom:auto;height:calc(var(--viewport-height) - var(--bar-height));padding:2px max(4px,env(safe-area-inset-right,0px)) calc(4px + env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-left,0px))}
  .device{flex:none;display:block;width:calc(var(--phone-w) + var(--phone-bezel)*2);height:calc(var(--phone-h) + var(--phone-bezel)*2);max-width:none;max-height:none;overflow:visible;padding:var(--phone-bezel);border:1.5px solid #6b6a66;border-radius:var(--phone-radius);background:linear-gradient(145deg,#2b2c2a,#121312 38%,#1d1e1c 70%,#383936);box-shadow:inset 0 0 0 1.5px #0a0b0a,inset 0 0 0 4px #1b1c1b,0 26px 60px -24px rgba(20,16,8,.55);transform:scale(var(--phone-scale));transform-origin:center center}
  .browser-chrome{display:none}
  .device-screen{flex:none;width:var(--phone-w);height:var(--phone-h);border-radius:var(--phone-screen-radius);isolation:isolate}
  .device-viewport{inset:var(--status-height) 0 var(--sheet-native) 0}
  .phone-top{position:absolute;top:0;right:0;left:0;z-index:2;display:flex;align-items:center;justify-content:space-between;height:var(--status-height);padding:4px 34px 0 42px;background:var(--screen-bg);color:var(--tour-ink);font-size:16px;font-weight:600;letter-spacing:-.01em;pointer-events:none}
  .phone-island{position:absolute;top:12px;left:50%;width:124px;height:36px;border-radius:20px;background:#030303;box-shadow:inset -10px 0 9px -10px #434343;transform:translateX(-50%)}
  .phone-signal{display:flex;align-items:center}
  .phone-signal svg{width:62px;height:15px}
  .phone-sheet{position:absolute;right:0;bottom:0;left:0;z-index:1;display:block;height:var(--sheet-native);border-top:1px solid var(--tour-line-gold);background:var(--tour-panel)}
  .phone-bottom{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;align-items:flex-end;justify-content:center;height:22px;padding-bottom:8px;pointer-events:none}
  .phone-bottom i{width:150px;height:5px;border-radius:5px;background:var(--tour-ink);opacity:.72}
  .phone-button{position:absolute;display:block;width:4px;border-radius:2px;background:linear-gradient(90deg,#4a4a47,#252624)}
  .phone-button-action{top:150px;left:-4px;height:36px}
  .phone-button-volume{top:210px;left:-4px;height:118px;background:linear-gradient(#303130 0 44%,transparent 44% 56%,#303130 56%)}
  .phone-button-side{top:250px;right:-4px;height:96px}
  [data-layout=sheet] .tour-notice{right:auto;bottom:auto;min-height:0;padding:0 4px;background:transparent;line-height:1.35}
  [data-layout=sheet] .tour-tooltip{right:auto;bottom:auto;width:auto;overflow:auto;overscroll-behavior:contain;padding:10px 16px 6px;border:0;border-radius:0;background:var(--tour-panel);box-shadow:none}
  [data-layout=sheet] .tour-tooltip[data-details-open]{border-top:1px solid var(--tour-line-gold);border-radius:18px 18px 0 0;box-shadow:0 -18px 40px -18px rgba(20,16,8,.45)}
  .tour-tooltip:before{display:none}
  .guide-meta{gap:10px;min-height:26px;margin-bottom:2px}
  .guide-step{margin-left:auto}
  [data-details-toggle]{display:inline-flex;min-width:0;min-height:32px;padding:4px 0 4px 6px;border:0;color:var(--tour-accent);font-size:12px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
  [data-details-toggle]:hover{background:transparent}
  .tour-tooltip:not([data-details-open]) [data-step-body]{display:none}
  [data-layout=sheet] .tour-status-row{display:flex;min-height:20px}
  .tour-status{margin:0}
  .tour-tooltip h1{margin:4px 0 6px;font-size:23px;line-height:1.08}
  .tour-tooltip p{margin:4px 0 8px;font-size:14px;line-height:1.5}
  .tour-step-actions{gap:10px}
  .tour-step-actions button{min-height:44px;font-size:12px}
  .tour-step-actions [data-back]{width:44px;min-width:44px;font-size:18px}
  .tour-step-actions [data-next]{flex:1;min-width:0;padding:10px 12px;white-space:nowrap;letter-spacing:.08em}
  .tour-step-actions [data-skip]{flex-shrink:0;min-height:44px;padding:6px 2px;font-size:12px}
  .tour-click-hint{font-size:12px;line-height:1.3}
  .tour-modal{max-height:calc(var(--viewport-height) - 24px);padding:28px 24px}
  .tour-modal h2{font-size:40px}
  .welcome-actions{flex-direction:column;align-items:stretch}
  .welcome-actions button{width:100%}
}
@media(min-width:600px) and (max-width:899px) and (max-height:620px){
  /* Short, wide viewport (a phone in landscape): the guide moves beside the
     device instead of inside it; the chassis keeps its portrait proportion. */
  .presentation{right:40%;height:calc(var(--viewport-height) - var(--bar-height) - var(--notice-height));padding:4px 8px 8px max(8px,env(safe-area-inset-left,0px))}
  .tour-tooltip{top:calc(var(--bar-height) + 8px)!important;right:max(14px,env(safe-area-inset-right,0px));left:62%!important;width:auto!important;max-height:calc(var(--viewport-height) - var(--bar-height) - var(--notice-height) - 16px);overflow:auto;padding:10px 4px;border:0;background:var(--tour-bg);box-shadow:none}
  .tour-tooltip h1{font-size:21px}
  .tour-step-actions{flex-wrap:wrap;gap:4px}
}
@media(max-width:380px){[data-layout=sheet] .tour-tooltip h1{font-size:20px}.tour-step-actions [data-next]{letter-spacing:.04em}.tour-step-actions{gap:8px}}
@media(max-width:360px){.tour-bar .tour-title{display:none}.tour-bar{gap:4px}.tour-bar img{width:80px}.tour-bar nav button,.tour-bar nav a{padding:6px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}