/* Phone-first, explorable app concept. The rest of the page is unchanged. */
.phone-experience{max-width:1120px;margin:var(--space-10) auto var(--space-6);text-align:left}
.phone-stage{display:grid;grid-template-columns:340px minmax(0,1fr);gap:var(--space-12);align-items:center}
.phone-column{padding:var(--space-5) var(--space-2);position:relative;min-width:0}
.phone-device{width:min(326px,100%);position:relative;margin:auto;background:#151a23;border:1px solid #69727e;border-radius:44px;padding:8px;box-shadow:inset 0 0 0 2px #313946,0 28px 55px #15203024,8px 8px 0 #15203004;transform:rotate(-2deg);transition:transform .45s var(--motion-ease)}
.phone-device:hover,.phone-device:focus-within{transform:rotate(0)}
.phone-side-button{position:absolute;width:3px;background:#69727e;border-radius:2px;z-index:0}
.phone-volume{left:-4px;top:130px;height:55px;box-shadow:0 65px #69727e}.phone-power{right:-4px;top:160px;height:80px}
.phone-glass{background:var(--paper);border-radius:35px;overflow:hidden;position:relative;border:1px solid #151a23}
.phone-status{height:42px;position:relative;display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-5);color:var(--ink);font-size:var(--text-xs);font-weight:600}
.phone-camera{position:absolute;width:82px;height:21px;background:#151a23;border-radius:20px;top:10px;left:50%;transform:translateX(-50%)}
.phone-signal{display:flex;align-items:end;gap:2px;height:10px}
.phone-signal i{display:block;width:2px;background:currentColor;height:4px}.phone-signal i:nth-child(2){height:6px}.phone-signal i:nth-child(3){height:8px}.phone-signal i:nth-child(4){height:10px}
.phone-signal b{display:block;margin-left:4px;width:17px;height:9px;border:1px solid currentColor;border-radius:2px;position:relative}
.phone-signal b::before{content:'';position:absolute;inset:1px 3px 1px 1px;background:currentColor}.phone-signal b::after{content:'';position:absolute;right:-3px;top:2px;width:2px;height:3px;background:currentColor}
.phone-brand{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);border-bottom:1px solid var(--line)}
.phone-monogram{font:400 1.8rem/1 var(--font-display);color:var(--gold-text);border-right:1px solid var(--line);padding-right:var(--space-3)}
.phone-brand strong{display:block;font:400 1.15rem/1.2 var(--font-display)}
.phone-brand div>span{display:block;color:var(--muted);font-size:var(--text-xs);margin-top:var(--space-1)}
.phone-brand-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);margin-left:auto}
.phone-home{padding:var(--space-5) var(--space-4) var(--space-2)}
.phone-kicker{font-size:var(--text-xs);letter-spacing:.07em;line-height:1.5;color:var(--gold-text);margin-bottom:var(--space-3)}
.phone-greeting{font:400 1.65rem/1.25 var(--font-display);letter-spacing:-.03em;margin-bottom:var(--space-5)}
.phone-home .tour-task-tabs{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
.phone-home .tour-task-tabs button{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--space-2);min-height:89px;border:1px solid var(--line);border-radius:8px;padding:var(--space-3);background:var(--surface);font-size:var(--text-xs);line-height:1.4;color:var(--ink)}
.phone-home .tour-task-tabs button[aria-selected=true]{border:1px solid var(--ink);background:var(--ink);color:var(--bg);box-shadow:0 5px 12px #15203012}
.phone-home .task-symbol{font-size:var(--text-lg);color:var(--gold-text)}
.phone-home .tour-task-tabs button[aria-selected=true] .task-symbol{color:#d5bd7c}
.phone-home .task-arrow{display:block;position:absolute;top:var(--space-3);right:var(--space-3);font-size:var(--text-xs);color:#d5bd7c}
.phone-preview{padding:var(--space-4);border:1px solid var(--line);border-left:2px solid var(--gold);margin-top:var(--space-5);border-radius:0 5px 5px 0}
.phone-preview>span{font-size:var(--text-xs);letter-spacing:.04em;color:var(--muted);display:block;line-height:1.5}
.phone-preview>p{font-size:var(--text-xs);color:var(--ink);line-height:1.7;margin-top:var(--space-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:40px;margin-bottom:0}
.phone-expand{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);background:var(--ink);color:var(--bg);border:0;border-radius:6px;min-height:48px;padding:var(--space-3) var(--space-4);font-size:var(--text-xs);margin-top:var(--space-4)}
.phone-expand>span{color:#d5bd7c;font-size:var(--text-base)}
.phone-sample-note{font-size:var(--text-xs);color:var(--muted);text-align:center;margin-top:var(--space-3);margin-bottom:0}
.phone-home-bar{height:24px;display:flex;align-items:center;justify-content:center}
.phone-home-bar>span{display:block;width:85px;height:3px;border-radius:3px;background:var(--ink)}
.phone-under-caption{display:flex;align-items:center;justify-content:center;gap:var(--space-3);font-size:var(--text-xs);color:var(--muted);margin-top:var(--space-8)}
.phone-popout{position:relative;min-width:0;border:1px solid var(--line);background:var(--paper);border-radius:8px;box-shadow:0 25px 60px #15203012}
.phone-popout::before{content:'';position:absolute;left:-41px;top:50%;width:28px;height:1px;background:var(--gold)}
.phone-popout::after{content:'';position:absolute;left:-17px;top:calc(50% - 2px);width:5px;height:5px;border-radius:50%;background:var(--gold)}
.popout-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--line);background:var(--surface);border-radius:8px 8px 0 0;color:var(--muted);font-size:var(--text-xs)}
.popout-toolbar>span{display:flex;align-items:center;gap:var(--space-2);letter-spacing:.09em}
.popout-toolbar button{display:flex;align-items:center;gap:var(--space-2);background:none;border:0;color:var(--gold-text);font-size:var(--text-xs);min-height:44px;padding:var(--space-2)}
.phone-popout .tour-task-panel{padding:var(--space-6);min-height:0;border-radius:0 0 8px 8px}
.phone-popout .tour-screen-heading h3{font-size:1.6rem}
.phone-popout .tour-flow{grid-template-columns:.9fr 1.1fr;gap:var(--space-4);margin-top:var(--space-6)}
.phone-popout .tour-flow-arrow{display:none}
.phone-popout .tour-input,.phone-popout .tour-result{padding:var(--space-4)}
.phone-popout .tour-input>p{margin-block:var(--space-4)}
.phone-popout .tour-result h4{margin-top:var(--space-4)}
.phone-popout .tour-result-row{padding-block:var(--space-3)}
.phone-popout .tour-result-row>p{font-size:var(--text-xs);line-height:1.7}
.phone-popout .tour-value{display:block;margin-top:var(--space-6);padding-top:var(--space-5)}
.phone-popout .tour-value-label{display:block;max-width:none;margin-bottom:var(--space-2)}
.phone-popout .tour-value p{font-size:var(--text-sm)}
.phone-dialog{width:min(1000px,calc(100% - 48px));max-height:calc(100dvh - 48px);margin:auto;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);box-shadow:0 35px 100px #0005;overflow:auto}
.phone-dialog::backdrop{background:#111827b8;backdrop-filter:blur(5px)}
.phone-dialog-header{display:flex;align-items:start;justify-content:space-between;gap:var(--space-5);padding:var(--space-6) var(--space-8);border-bottom:1px solid var(--line)}
.phone-dialog-header .eyebrow{margin-bottom:var(--space-2);font-size:var(--text-xs)}
.phone-dialog-header h3{font:400 var(--text-xl)/1.25 var(--font-display);letter-spacing:-.03em}
.phone-dialog-header>button{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);font-size:1.5rem;line-height:1}
.phone-dialog-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2);padding:var(--space-5) var(--space-8);background:var(--surface);border-bottom:1px solid var(--line)}
.phone-dialog-tabs button{min-height:48px;font-size:var(--text-sm);padding:var(--space-3);border:1px solid var(--line);background:var(--paper);color:var(--muted);border-radius:4px}
.phone-dialog-tabs button[aria-selected=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.modal-screen{padding:var(--space-6) var(--space-8)}
.modal-screen>p:first-child{font-size:var(--text-base);color:var(--muted);margin-bottom:var(--space-6);max-width:740px}
.modal-flow{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--space-6);align-items:start}
.modal-input,.modal-output{padding:var(--space-6);border:1px solid var(--line);min-width:0}
.modal-input{background:var(--surface)}
.modal-eyebrow{display:block;font-size:var(--text-xs);letter-spacing:.06em;color:var(--gold-text);line-height:1.6}
.modal-input>p{font-size:var(--text-base);margin-block:var(--space-5);line-height:1.7}
.modal-input>small{display:block;padding-top:var(--space-4);border-top:1px solid var(--line);font-size:var(--text-xs);color:var(--muted)}
.modal-output{border-top:2px solid var(--gold)}
.modal-output h4{font:500 var(--text-lg)/1.4 var(--font-body);margin:var(--space-4) 0 var(--space-5)}
.modal-output .tour-result-row>strong{font-size:var(--text-sm)}
.modal-output .tour-result-row>p{font-size:var(--text-base)}
.modal-value{margin-top:var(--space-6);border-top:1px solid var(--line);padding-top:var(--space-5);color:var(--muted);font-size:var(--text-sm)}
.phone-dialog-disclosure{border-top:1px solid var(--line);padding:var(--space-4) var(--space-8);font-size:var(--text-xs);color:var(--muted);background:var(--surface);margin:0}
.phone-dialog.modal-animate[open]{animation:phone-open .3s var(--motion-ease)}
@keyframes phone-open{from{opacity:.6;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
body.phone-modal-open{overflow:hidden}
.phone-dialog-header{position:sticky;top:0;z-index:3;background:var(--paper)}
@media(max-width:1050px){.phone-stage{grid-template-columns:310px minmax(0,1fr);gap:var(--space-8)}.phone-popout::before,.phone-popout::after{display:none}.phone-popout .tour-flow{grid-template-columns:1fr}.phone-popout .tour-result-row>p{font-size:var(--text-sm)}.phone-column{padding-inline:var(--space-1)}}
@media(max-width:900px){.phone-stage{grid-template-columns:1fr}.phone-column{padding:var(--space-3) var(--space-2)}.phone-device{transform:none}.phone-tour-ready .phone-popout{display:none}.phone-popout{max-width:620px;width:100%;margin:auto}.phone-experience{margin-top:var(--space-6)}.phone-under-caption{margin-top:var(--space-6)}.phone-dialog{width:calc(100% - 32px);max-height:calc(100dvh - 32px)}.phone-dialog-header{padding:var(--space-5)}.phone-dialog-header h3{font-size:1.6rem}.phone-dialog-tabs{grid-template-columns:1fr 1fr;padding:var(--space-4)}.phone-dialog-tabs button{font-size:var(--text-xs);min-height:48px}.modal-screen{padding:var(--space-5)}.modal-flow{grid-template-columns:1fr;gap:var(--space-5)}.modal-input,.modal-output{padding:var(--space-5)}.modal-screen>p:first-child,.modal-input>p,.modal-output .tour-result-row>p{font-size:var(--text-sm)}.phone-dialog-disclosure{padding:var(--space-4) var(--space-5)}}
@media(max-width:360px){.phone-home{padding-inline:var(--space-3)}.phone-greeting{font-size:1.5rem}.phone-home .tour-task-tabs button{padding:var(--space-3) var(--space-2);min-height:85px}.phone-brand{padding-inline:var(--space-3)}.phone-preview{padding:var(--space-3)}.phone-status{padding-inline:var(--space-4)}.phone-dialog-header{padding:var(--space-4)}.modal-screen{padding:var(--space-4)}}
html:not(.phone-tour-ready) .phone-expand,html:not(.phone-tour-ready) #popout-expand{display:none}
@media(prefers-reduced-motion:reduce){.phone-device{transform:none;transition:none}.phone-dialog.modal-animate[open]{animation:none}}