/* This layer keeps the app usable: only the guide card catches pointer events. */
html .sg-tour-host{--sg-tour-safe-top:env(safe-area-inset-top,0px);--sg-tour-safe-bottom:env(safe-area-inset-bottom,0px);--sg-tour-safe-left:env(safe-area-inset-left,0px);--sg-tour-safe-right:env(safe-area-inset-right,0px);position:fixed;inset:0;z-index:10000;pointer-events:none;isolation:isolate;font-family:var(--font-body,Inter,system-ui,sans-serif);color:#28252f}
html .sg-tour-host[hidden]{display:none!important}
html dialog.sg-tour-example{position:fixed;inset:12px;margin:auto;width:min(1040px,calc(100vw - 24px));height:calc(100dvh - 24px);max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);box-sizing:border-box;padding:0;border:1px solid var(--line,#c8bfd8);border-radius:20px;background:var(--surface,#f7f4fb);color:var(--ink,#28252f);overflow:hidden}
html dialog.sg-tour-example[open]{display:flex;flex-direction:column}
html dialog.sg-tour-example::backdrop{background:#17102075;backdrop-filter:blur(5px)}
html[data-theme="dark"] dialog.sg-tour-example{--surface:#26232d;--ink:#f9f6ff;--line:#6f607e;--muted:#d3c3e7;background:#26232d;color:#f9f6ff}
html .sg-example-head{flex:none;padding:14px 20px;border-bottom:1px solid var(--line,#d4cddd)}
html .sg-example-head>span{font-size:.75rem;font-weight:650;color:var(--muted,#665875)}
html .sg-example-head h2{margin:5px 0;font-size:1.1rem;line-height:1.35;overflow-wrap:anywhere}
html .sg-example-head p{margin:0;font-size:.77rem;line-height:1.5;color:var(--muted,#665875)}
html .sg-example-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px 20px calc(260px + env(safe-area-inset-bottom,0px));scroll-padding-block:20px 260px}
html .sg-example-body .sf-shell{max-width:100%;margin:0}
html .sg-example-body button,html .sg-example-body summary{min-height:44px}
html .sg-example-body .v27-deal-sheet-grid{grid-template-columns:minmax(0,1fr)}
html .sg-example-body .partnership-visual-column{max-width:380px;justify-self:center;width:100%}
html .sg-example-body .p31-action-stack,html .sg-example-body .counter-complete{width:100%;box-sizing:border-box}
html .sg-example-launcher{margin:20px 0;padding:16px;border:1px solid var(--line,#d4cddd);border-radius:16px;background:var(--surface,#f7f4fb)}
html .sg-example-launcher>p{font-size:.8rem;color:var(--muted,#665875);margin:0 0 10px}
html .sg-example-launcher button{width:100%;min-height:60px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px;text-align:left;white-space:normal}
html .sg-example-launcher button span:first-child{display:grid;gap:5px;min-width:0}
@media(max-width:520px){html .sg-example-head{padding:12px 14px}html .sg-example-body{padding-inline:14px}html .sg-example-launcher button{flex-wrap:wrap}}
html .sg-tour-card{position:fixed;box-sizing:border-box;pointer-events:auto;display:flex;flex-direction:column;max-width:calc(100vw - 24px);margin:0;padding:0;border:1px solid #cac3dc;border-radius:20px;background:#fff;box-shadow:0 12px 48px #18102b38;overflow:hidden}
html .sg-tour-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0;padding:7px 10px 3px 16px;font-size:calc(.72rem * var(--elan-ui-scale,1));font-weight:650;line-height:1.4;color:#63566e}
html .sg-tour-head button{min-height:44px;border:0;border-radius:12px;padding:8px 10px;background:transparent;color:#504354;font:inherit;font-size:calc(.75rem * var(--elan-ui-scale,1));font-weight:650;white-space:normal;cursor:pointer}
html .sg-tour-progress{height:3px;flex-shrink:0;background:#eee9f5}
html .sg-tour-progress i{display:block;height:100%;background:#7954bb}
html .sg-tour-copy{padding:12px 16px 4px;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
html .sg-tour-chapter{margin:0 0 5px;font-size:calc(.7rem * var(--elan-ui-scale,1));font-weight:600;line-height:1.5;color:#63566e}
html .sg-tour-card h2{margin:0;font-size:calc(1.05rem * var(--elan-ui-scale,1));letter-spacing:-.025em;font-weight:550;line-height:1.3;color:#28252f;overflow-wrap:anywhere}
html .sg-tour-detail>p{margin:7px 0 2px;font-size:calc(.82rem * var(--elan-ui-scale,1));line-height:1.5;color:#51495b}
html .sg-tour-footer{display:flex;align-items:center;gap:6px;flex-shrink:0;padding:10px 12px 4px}
html .sg-tour-footer button{display:grid;place-items:center;min-width:44px;min-height:44px;box-sizing:border-box;padding:8px 10px;border:1px solid #d5cede;border-radius:12px;background:#f5f1fa;color:#44374f;cursor:pointer;font-family:inherit;font-size:calc(1rem * var(--elan-ui-scale,1));line-height:1.3}
html .sg-tour-footer .sg-tour-primary{flex:1;font-size:calc(.79rem * var(--elan-ui-scale,1));font-weight:650;background:#7650b0;color:#fff;border-color:#7650b0;white-space:normal;overflow-wrap:anywhere}
html .sg-tour-card.is-finish .sg-tour-head{padding:12px 16px}
html .sg-tour-card.is-finish .sg-tour-chapter{display:none}
html .sg-tour-card.is-finish .sg-tour-footer{flex-direction:column;align-items:stretch;padding-bottom:12px}
html .sg-tour-card.is-finish .sg-tour-footer button{width:100%;font-size:calc(.79rem * var(--elan-ui-scale,1));white-space:normal}
html .sg-tour-card button:disabled{opacity:.58;cursor:default}
html .sg-tour-later{align-self:center;flex-shrink:0;min-height:44px;margin:0 12px 4px;padding:7px 12px;border:0;border-radius:10px;background:transparent;color:#5d506b;font-family:inherit;font-size:calc(.73rem * var(--elan-ui-scale,1));text-decoration:underline;text-underline-offset:3px;cursor:pointer}
html .sg-tour-card button:focus-visible,html .sg-tour-card summary:focus-visible{outline:2px solid #7650b0;outline-offset:-3px}
html .sg-tour-card.is-compact .sg-tour-chapter{display:none}
html .sg-tour-card.is-compact .sg-tour-copy{padding:9px 16px 0}
html .sg-tour-card.is-compact .sg-tour-footer{padding-bottom:10px}
html .sg-tour-card.is-tight .sg-tour-detail,html .sg-tour-card.is-tight .sg-tour-chapter,html .sg-tour-card.is-tight .sg-tour-later{display:none}
html .sg-tour-card.is-tight .sg-tour-footer{padding-bottom:10px}
html .sg-tour-footer .sg-tour-mini-skip{display:none}
/* Only a very short visible viewport (typically the iPhone keyboard) needs this strip. */
html .sg-tour-card.is-mini .sg-tour-head,html .sg-tour-card.is-mini .sg-tour-progress,html .sg-tour-card.is-mini .sg-tour-later{display:none}
html .sg-tour-card.is-mini .sg-tour-copy{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
html .sg-tour-card.is-mini .sg-tour-footer{padding:8px;gap:4px}
html .sg-tour-card.is-mini .sg-tour-mini-skip{display:grid}
html .sg-tour-error{color:#a1203e!important;font-weight:600}
html .sg-tour-examples{margin:10px 0 0;padding:0;border:0;background:transparent;color:#51495b}
html .sg-tour-examples summary{display:flex;align-items:center;min-height:44px;padding:0;list-style:none;font-size:calc(.77rem * var(--elan-ui-scale,1));font-weight:650;cursor:pointer}
html .sg-tour-examples summary:after{content:'+';margin-left:auto;font-size:calc(1.1rem * var(--elan-ui-scale,1))}
html .sg-tour-examples[open] summary:after{content:'−'}
html .sg-tour-examples summary::-webkit-details-marker{display:none}
html .sg-tour-examples summary::marker{content:''}
html .sg-tour-example-scroll{max-height:36vh;overflow-y:auto;padding:4px}
html .sg-tour-examples .sg-framing-examples{display:grid;align-items:start;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr));margin:8px 0}
html .sg-tour-examples .sg-framing-examples figure{min-width:0;margin:0;border:1px solid #ddd4e6;border-radius:10px;overflow:hidden;background:#f6f2fa}
html .sg-tour-examples .sg-framing-photo{position:relative;isolation:isolate;overflow:hidden;width:min(100%,calc(180px * var(--sg-photo-ratio)));height:auto;aspect-ratio:var(--sg-photo-ratio);margin:0 auto;background:#b5b2ad}
html .sg-tour-examples .sg-framing-photo img{position:absolute;display:block;width:var(--sg-photo-width);height:var(--sg-photo-height);left:var(--sg-photo-left);top:var(--sg-photo-top);max-width:none;max-height:none;margin:0;border:0;border-radius:0;object-fit:fill;filter:none}
html .sg-tour-examples figcaption{display:grid;gap:4px;position:static;margin:0;padding:8px;color:#51495b;font-size:calc(.7rem * var(--elan-ui-scale,1));line-height:1.5;overflow-wrap:anywhere}
html .sg-tour-examples figcaption span{display:none}
html .sg-tour-examples figcaption strong{color:#28252f;font-size:calc(.72rem * var(--elan-ui-scale,1))}
html .sg-tour-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html[data-theme="dark"] .sg-tour-card{background:#26232d;border-color:#6f607e;color:#f9f6ff;box-shadow:0 12px 48px #0008}
html[data-theme="dark"] .sg-tour-head,html[data-theme="dark"] .sg-tour-head button,html[data-theme="dark"] .sg-tour-chapter,html[data-theme="dark"] .sg-tour-later{color:#d3c3e7}
html[data-theme="dark"] .sg-tour-card h2{color:#f9f6ff}
html[data-theme="dark"] .sg-tour-detail>p,html[data-theme="dark"] .sg-tour-examples{color:#ded4e9}
html[data-theme="dark"] .sg-tour-progress{background:#44384f}
html[data-theme="dark"] .sg-tour-progress i{background:#b894ee}
html[data-theme="dark"] .sg-tour-footer button{background:#3c3248;border-color:#796789;color:#f6edff}
html[data-theme="dark"] .sg-tour-footer .sg-tour-primary{background:#c6a3f6;border-color:#c6a3f6;color:#21172d}
html[data-theme="dark"] .sg-tour-examples .sg-framing-examples figure{background:#352d40;border-color:#756184}
html[data-theme="dark"] .sg-tour-examples figcaption{color:#ded4e9}
html[data-theme="dark"] .sg-tour-examples figcaption strong{color:#f9f6ff}
html[data-theme="dark"] .sg-tour-error{color:#ffb0bc!important}
@media(max-height:480px){html .sg-tour-copy{padding-top:7px}html .sg-tour-detail>p{font-size:calc(.76rem * var(--elan-ui-scale,1))}html .sg-tour-chapter{display:none}html .sg-tour-footer{padding-top:6px}html .sg-tour-examples{margin-top:3px}}
html .sg-tour-host,html .sg-tour-host *{animation:none!important;transition:none!important}
html .sg-tour-important{margin:8px 0;color:#51495b}
html .sg-tour-important summary{display:flex;align-items:center;gap:8px;min-height:44px;list-style:none;color:#a1203e;font:650 calc(.77rem * var(--elan-ui-scale,1))/1.4 var(--font-body,Inter,system-ui,sans-serif);cursor:pointer}
html .sg-tour-important summary::-webkit-details-marker{display:none}
html .sg-tour-important summary svg{flex:none}
html .sg-tour-important summary:after{content:'+';margin-left:auto}
html .sg-tour-important[open] summary:after{content:'−'}
html .sg-tour-important p{font-size:calc(.79rem * var(--elan-ui-scale,1));line-height:1.5;margin:10px 0}
html[data-theme="dark"] .sg-tour-important{color:#ded4e9}
html[data-theme="dark"] .sg-tour-important summary{color:#ffb0bc}
/* Highlight frame: a separate layer above the page (see app-tour.js placeFrame), never an outline on the control.
   It flashes in on each new step, then glows gently. Static when motion is reduced. */
html .sg-tour-frame{--sg-tour-glow:144,100,208;position:fixed;z-index:9999;box-sizing:border-box;pointer-events:none;margin:0;padding:0;border:2.5px solid rgb(var(--sg-tour-glow));border-radius:14px;background:transparent;box-shadow:0 0 0 3px rgba(var(--sg-tour-glow),.16),0 0 14px rgba(var(--sg-tour-glow),.32);animation:sg-tour-frame-glow 2s ease-in-out infinite}
html .sg-tour-frame[hidden]{display:none!important}
html .sg-tour-frame.is-flash{animation:sg-tour-frame-flash .7s cubic-bezier(.2,.8,.2,1),sg-tour-frame-glow 2s ease-in-out .7s infinite}
html[data-theme="dark"] .sg-tour-frame{--sg-tour-glow:190,150,245}
@keyframes sg-tour-frame-glow{0%,100%{box-shadow:0 0 0 2px rgba(var(--sg-tour-glow),.12),0 0 8px rgba(var(--sg-tour-glow),.22)}50%{box-shadow:0 0 0 7px rgba(var(--sg-tour-glow),.26),0 0 28px rgba(var(--sg-tour-glow),.56)}}
@keyframes sg-tour-frame-flash{0%{opacity:0;border-color:rgba(var(--sg-tour-glow),0);box-shadow:0 0 0 0 rgba(var(--sg-tour-glow),0)}35%{opacity:1;border-color:rgb(var(--sg-tour-glow));box-shadow:0 0 0 8px rgba(var(--sg-tour-glow),.34),0 0 30px rgba(var(--sg-tour-glow),.72)}100%{opacity:1;box-shadow:0 0 0 3px rgba(var(--sg-tour-glow),.14),0 0 10px rgba(var(--sg-tour-glow),.26)}}
@media(prefers-reduced-motion:reduce){html .sg-tour-frame,html .sg-tour-frame.is-flash{animation:none!important}}
html[data-app-motion="reduced"] .sg-tour-frame,html[data-app-motion="reduced"] .sg-tour-frame.is-flash{animation:none!important}
/* The guide can sit inside a native field sheet (top layer). Its own typography must win over the sheet's
   paragraph and heading styles so the card reads the same everywhere. */
html .sg-tour-host .sg-tour-card .sg-tour-chapter{margin:0 0 5px;font-size:calc(.7rem * var(--elan-ui-scale,1));font-weight:600;line-height:1.5;color:#63566e}
html .sg-tour-host .sg-tour-card .sg-tour-copy h2{margin:0;font-size:calc(1.05rem * var(--elan-ui-scale,1));letter-spacing:-.025em;font-weight:550!important;line-height:1.3;color:#28252f}
html .sg-tour-host .sg-tour-card .sg-tour-later{line-height:1.4}
html .sg-tour-host .sg-tour-card .sg-tour-detail>p{margin:7px 0 2px;font-size:calc(.82rem * var(--elan-ui-scale,1));line-height:1.5;color:#51495b}
html .sg-tour-host .sg-tour-card .sg-tour-important p{margin:10px 0;font-size:calc(.79rem * var(--elan-ui-scale,1));line-height:1.5;color:inherit}
html[data-theme="dark"] .sg-tour-host .sg-tour-card .sg-tour-chapter{color:#d3c3e7}
html[data-theme="dark"] .sg-tour-host .sg-tour-card .sg-tour-copy h2{color:#f9f6ff}
html[data-theme="dark"] .sg-tour-host .sg-tour-card .sg-tour-detail>p{color:#ded4e9}
html .sg-tour-host .sg-tour-card .sg-tour-error{color:#a1203e;font-weight:600}
html[data-theme="dark"] .sg-tour-host .sg-tour-card .sg-tour-error{color:#ffb0bc}
@media(max-height:480px){html .sg-tour-host .sg-tour-card .sg-tour-detail>p{font-size:calc(.76rem * var(--elan-ui-scale,1))}html .sg-tour-host .sg-tour-card .sg-tour-chapter{display:none}}
html .sg-tour-host .sg-tour-card.is-finish .sg-tour-chapter,html .sg-tour-host .sg-tour-card.is-compact .sg-tour-chapter,html .sg-tour-host .sg-tour-card.is-tight .sg-tour-chapter{display:none}
/* The red « ! » of the photo step keeps flashing inside the card (every other animation of the guide is off). */
html .sg-tour-host .sg-tour-card .sg-attention.sg-tour-attention{margin:10px 0 2px}
html .sg-tour-host .sg-tour-card .sg-attention.is-flashing .sg-attention-icon{animation:sg-attention-flash 1.6s ease-out infinite!important}
@media(prefers-reduced-motion:reduce){html .sg-tour-host .sg-tour-card .sg-attention.is-flashing .sg-attention-icon{animation:none!important}}
html[data-app-motion="reduced"] .sg-tour-host .sg-tour-card .sg-attention.is-flashing .sg-attention-icon{animation:none!important}