/* Shared stage: conversation, context, and mobile use one continuous layout. */
/* block, not swap (owner, 2026-09-25): text waits the moment the preloaded font takes instead of being
   drawn in a fallback font and visibly resized when it arrives. */
@font-face{font-family:Manrope;src:url('/robofox/fonts/Manrope-Variable.ttf') format('truetype');font-weight:200 800;font-display:block}
html,body{font-family:Manrope,Geist,Arial,sans-serif}
.field-control input,.field-control select,.answer-edit-wrap input,.answer-edit-wrap select{font-family:Manrope,Geist,Arial,sans-serif}
:root{--wf-bg:#111518;--wf-surface:#191f27;--wf-raised:#222832;--wf-line:#323b48;--wf-line-strong:#626d7d;--wf-text:#edf2f7;--wf-muted:#afb7c5;--wf-faint:#919ba9;--wf-accent:#8cbbda;--wf-control-bg:#20262e;--wf-card-start:var(--wf-surface);--wf-card-end:var(--wf-surface);--stage-ease:cubic-bezier(.22,1,.36,1);--stage-time:240ms;--fox-col:400px;--stage-gap:64px;--header-h:92px}
body{background:radial-gradient(ellipse at 50% 37%,var(--wf-surface),transparent 70%),var(--wf-bg);font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:clip}
button,a,summary{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}button,a,summary{touch-action:manipulation}a:focus-visible,summary:focus-visible{outline:2px solid var(--wf-accent);outline-offset:4px}
.stage-header{width:min(1200px,calc(100% - 72px));height:var(--header-h);margin:auto;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:8}
.wordmark{display:flex;align-items:center;gap:9px;font-size:19px;letter-spacing:-.7px;font-weight:560}.wordmark svg{width:30px;height:30px;color:var(--wf-accent);stroke-width:1}.brand-os{color:var(--wf-accent);font-weight:450}
.stage-tools{display:flex;align-items:center;gap:12px}.stage-tools .sound-control{display:grid;place-items:center;width:44px;height:44px;border:1px solid transparent;background:transparent;border-radius:50%;color:var(--wf-muted)}.sound-control::before,.sound-control::after{display:none}.sound-control:hover{border-color:var(--wf-line);color:var(--wf-text)}.sound-control svg{width:21px;height:21px}.sound-slash{display:none}.sound-control[aria-pressed=false] .sound-slash{display:block}.sound-control[aria-pressed=false] .sound-waves{display:none}.sound-control[data-retry=true]{border-color:var(--wf-accent)}
/* Start over is a small quiet link beside the sound button (owner, 2026-09-24: no menu). */
.restart-link{min-height:44px;padding:0 8px;border:0;background:none;color:var(--wf-faint);font-size:12px;cursor:pointer;white-space:nowrap}.restart-link:hover{color:var(--wf-text);text-decoration:underline;text-underline-offset:3px}.restart-link:focus-visible{outline:2px solid var(--wf-accent);outline-offset:2px;border-radius:6px}
/* On a phone the mic is in the header (stage.js viewportBehavior): the sound button's size, its ring kept. */
.stage-header #voice{width:44px;height:44px;margin:0}.stage-header #voice svg{width:20px;height:20px}
.stage-progress{position:relative;width:180px;height:10px;margin:7px auto 0;z-index:2}.stage-progress ol{display:flex;justify-content:space-between;list-style:none;padding:0;margin:0;position:relative}.stage-progress li{display:grid;place-items:center;width:10px;height:10px}.stage-progress i{display:block;width:6px;height:6px;background:#28414e;border-radius:50%;transition:background 600ms,box-shadow 600ms,transform 600ms}.stage-progress li[data-complete=true] i,.stage-progress li[aria-current=step] i{background:var(--wf-accent)}.stage-progress li[aria-current=step] i{box-shadow:0 0 12px #11cce64d;transform:scale(1.25)}.progress-track{position:absolute;left:5px;right:5px;top:4px;height:1px;background:var(--wf-line)}#progress-fill{display:block;height:1px;width:0;background:var(--wf-accent);transition:width var(--stage-time) var(--stage-ease)}
#design-label{text-align:center;color:var(--wf-faint);font-size:10px;letter-spacing:.06em;position:absolute;left:0;right:0;top:119px;margin:0}
.experience{grid-template-columns:minmax(0,1fr) var(--fox-col);grid-template-rows:1fr auto;column-gap:var(--stage-gap);width:min(1200px,calc(100% - 72px));min-height:calc(100dvh - 130px);padding:38px 0 28px;row-gap:0}
.fox-stage{padding:0 0 28px;gap:0;transition:width var(--stage-time) var(--stage-ease),padding var(--stage-time) var(--stage-ease)}
.portrait{width:440px;max-width:100%;aspect-ratio:1.22;transition:width var(--stage-time) var(--stage-ease),transform var(--stage-time) var(--stage-ease)}
.voice-control{position:relative;display:grid;place-items:center;flex:none;width:64px;height:64px;min-height:0;padding:0;border:1px solid #19d6f0;background:radial-gradient(circle,#082630,#041116 72%);color:#aff4ff;box-shadow:0 0 0 4px #10d3e607,0 0 21px #0acde52b,inset 0 0 12px #08d0ef12;transition:box-shadow .2s,background .2s,transform .2s}
.voice-control::before{display:none}.voice-control svg{width:25px;height:25px}.voice-control:hover{background:#0a2f3a;box-shadow:0 0 26px #0acde546;transform:scale(1.035)}.voice-control[aria-pressed=true]{background:#082630;box-shadow:0 0 0 calc(4px + var(--mic-level,0)*12px) #11cce618,0 0 24px #0acde53b}.voice-control[data-connecting=true]{border-style:dashed}
.voice-status{margin-top:14px;font-size:12px;max-width:390px}.caption{width:min(650px,100%);min-height:100px;max-height:min(320px,34dvh);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;margin-top:24px;padding:0 12px}#caption-text{color:var(--wf-text);font-size:clamp(17px,1.8vw,22px);font-weight:440;letter-spacing:-.45px;line-height:1.55;text-wrap:pretty}#caption-text span{transition:opacity .25s ease}#caption-text span[data-pending]{opacity:.5}
.journey-shell{align-self:start;margin-top:10px;width:100%;min-width:0;pointer-events:none;opacity:0;transform:translateX(-22px);transition:opacity .45s ease .1s,transform var(--stage-time) var(--stage-ease)}.journey-shell:has(.journey-card){pointer-events:auto}.screen{min-height:0}body[data-focus=card] .journey-shell{opacity:1;transform:translateX(0)}body[data-focus=card] .fox-stage{width:var(--fox-col);padding:12px 0 0}body[data-focus=card] .portrait{width:310px;transform:none}body[data-focus=card] .caption{width:100%;margin-top:14px}body[data-focus=card] #caption-text{font-size:17px;line-height:1.5}body[data-focus=card] .voice-control{width:52px;height:52px}
.composer-dock{grid-column:1/-1;grid-row:2;align-self:end;width:min(820px,100%);margin:28px auto 0;z-index:5;position:relative}.composer,body[data-focus=card] .composer{width:100%;transform:none;min-height:58px;padding:6px 7px 6px 20px;border:1px solid #203945;border-radius:15px;background:linear-gradient(120deg,#071216ed,#071015ed);box-shadow:0 12px 40px #0002}.composer:focus-within{border-color:#358294;box-shadow:0 0 0 3px #11cce608}#chat-input{min-height:40px;font-size:14px;font-weight:350}
.send-control{width:42px;height:42px;background:#10222c;border:1px solid #19343e80;border-radius:12px;color:#aac8d8}.send-control:hover{background:#173440;color:var(--wf-text)}.send-control:disabled{background:#0b181e;opacity:.45}.send-control svg{width:19px;height:19px}
.user-ack{display:flex;justify-content:center;gap:12px;align-items:baseline;margin:0 auto 16px;color:var(--wf-muted);font-size:13px;line-height:1.5;max-width:90%;transition:opacity .4s}.user-ack>span:first-child{font:9px GeistMono,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--wf-faint)}.user-ack[data-replied=true]{opacity:.45}
.journey-card{border-color:#153540;border-radius:21px;padding:28px;background:radial-gradient(ellipse at 0 0,#07304140,transparent 62%),linear-gradient(140deg,#071318ef,#040d11ed);box-shadow:0 24px 60px #0002;animation:context-in .65s var(--stage-ease) both}.card-kicker{color:#8bafc0;letter-spacing:.16em;margin-bottom:13px}.journey-card h1{font-size:25px;letter-spacing:-.8px;font-weight:500;margin-bottom:14px;text-wrap:balance}.card-help{line-height:1.7}.card-actions{gap:9px;margin-top:24px}.card-button{min-height:42px;padding:11px 19px;border-radius:11px;font-weight:500;flex:1}.primary-card-button{background:linear-gradient(140deg,#16d3e9,#00b8d6);color:#002632;border-color:#22d7ee;box-shadow:0 4px 16px #00b8d612}.secondary-card-button{background:#071015;border-color:#354e59}.secondary-card-button:hover{background:#0b1d25}
.answer-grid{grid-template-columns:1fr;gap:4px;margin-top:22px}.answer-row{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:15px;row-gap:0;align-items:center;padding:11px 0;border:0;background:none}.answer-icon{grid-column:1;grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid #0c3745;background:#06202a66;color:var(--wf-accent);font-size:18px}.answer-icon svg{width:20px;height:20px}.answer-label{grid-column:2;color:var(--wf-muted);font-size:11px;margin-bottom:6px}.answer-row strong{grid-column:2;font-size:19px;font-weight:460;letter-spacing:-.4px;overflow-wrap:anywhere}.answer-edit-wrap{grid-column:2;min-width:0}.answer-row[data-editing=false] .answer-edit-wrap{display:none}.answer-row[data-editing=true] strong{display:none}
.answer-edit-wrap input,.answer-edit-wrap select{width:100%;min-height:44px;border:1px solid #294852;border-radius:9px;background:#061219;color:var(--wf-text);padding:10px 12px;font-size:14px}.answer-row:focus-within .answer-icon{border-color:var(--wf-accent)}
.business-name-edit[data-editing=false]{display:none}
.estimate-range{padding:0;border:0;background:none}.estimate-range-head{display:block}.estimate-range-head strong{font-size:clamp(32px,4vw,45px);font-weight:450;letter-spacing:-2px}.estimate-range-head span{display:block;color:var(--wf-faint);font-size:11px;margin-top:7px}.usage-bar{display:flex;gap:3px;height:13px;margin:25px 0 20px;overflow:hidden;border-radius:4px}.usage-segment{height:100%;min-width:2px;background:var(--category);transform-origin:left;animation:bar-in .65s var(--stage-ease) both;animation-delay:calc(160ms + var(--index)*50ms)}.usage-lines{display:grid;gap:15px}.usage-row{display:grid;grid-template-columns:10px minmax(0,1fr) auto 34px;align-items:center;gap:10px;font-size:12px;color:var(--wf-muted);animation:phrase-in .4s ease both;animation-delay:calc(260ms + var(--index)*45ms)}.usage-swatch{width:9px;height:9px;background:var(--category);border-radius:2px}.usage-cost{color:#c8dce6;font-size:11px;font-variant-numeric:tabular-nums}.usage-percent{font-size:10px;text-align:right;color:var(--wf-faint)}.usage-basis{color:var(--wf-faint);font-size:10px;line-height:1.5;margin:16px 0}.estimate-upfront{padding:15px;border-radius:13px}
.secure-placeholder{border-style:solid;padding:22px;background:#071a22;gap:10px}.secure-placeholder small{font-size:11px}.secure-icon{font-size:25px}.toast{bottom:100px;border-color:#385563;border-radius:12px;background:#0a1b24f5}
/* VOICE-7: listening, thinking and speaking read differently at a glance. Listening: the eyes and mic border respond to the voice.
   Thinking: three dots follow the visitor's words until he answers.
   Speaking: the mouth moves. */
#user-ack-text::after{content:"";display:inline-block;width:0;height:4px;margin-left:6px;vertical-align:middle;background:radial-gradient(circle,currentColor 1.5px,transparent 2px) 0 50%/6px 4px repeat-x}
body[data-performance=thinking] .user-ack[data-replied=false] #user-ack-text::after{width:18px;animation:ack-dots 1.2s steps(1,end) infinite}
/* VOICE-13: voice could not start or was lost; a tap on the mic retries. */
.voice-control[data-unavailable=true]{opacity:.6;border-color:var(--wf-line-strong);box-shadow:none}
.journey-card>.card-kicker,.journey-card>h1{animation:phrase-in .25s ease both;animation-delay:90ms}
.journey-card>.card-help,.answer-grid{animation:phrase-in .35s ease both;animation-delay:160ms}
.journey-card>.card-actions{animation:phrase-in .3s ease both;animation-delay:260ms}
.estimate-range-head strong{overflow-wrap:anywhere}
@keyframes fox-thinking{0%,100%{opacity:.35}50%{opacity:.85}}@keyframes ack-dots{0%{width:6px}33%{width:12px}66%{width:18px}}
@keyframes context-in{from{opacity:0;transform:translate(-16px,7px)}to{opacity:1;transform:none}}@keyframes phrase-in{from{opacity:0;filter:blur(2px)}to{opacity:1;filter:blur(0)}}@keyframes bar-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(min-width:1600px){.experience{padding-top:65px}.portrait{width:500px}}
@media(max-width:860px){.stage-header{width:calc(100% - 40px);height:76px}.wordmark{font-size:18px;white-space:nowrap}.stage-tools{gap:4px}.stage-progress{width:155px;margin-top:0}#design-label{top:98px;font-size:9px}.experience{width:calc(100% - 36px);grid-template-columns:1fr;grid-template-rows:auto 1fr auto;min-height:calc(100dvh - 100px);padding:32px 0 20px;gap:0}.fox-stage,body[data-focus=card] .fox-stage{grid-column:1;grid-row:1;width:100%;padding:0;transition:width var(--stage-time) var(--stage-ease)}.portrait{width:330px}.journey-shell{grid-row:2;grid-column:1;margin-top:0;transform:translateY(18px)}body[data-focus=card] .journey-shell{margin-top:20px;transform:none}body[data-focus=card] .portrait{width:200px}.composer-dock{grid-row:3;grid-column:1;margin-top:24px;position:sticky;bottom:max(12px,env(safe-area-inset-bottom));padding-top:8px}.composer,body[data-focus=card] .composer{transform:none}.journey-card{padding:25px;border-radius:22px}.usage-row{font-size:13px}.usage-cost{font-size:12px}.estimate-range-head strong{font-size:44px}}
/* D-8: a tilted ring wider than the fox stuck out past a 375px screen and let the page scroll sideways. */
@media(max-width:860px){body[data-focus=card] .composer-dock{position:relative;bottom:auto}body[data-keyboard=open][data-focus=card] .composer-dock{position:sticky;bottom:12px}}
@media(max-width:390px){.stage-header{width:calc(100% - 28px)}.stage-tools{gap:2px}.restart-link{padding:0 3px}.experience{width:calc(100% - 28px)}.portrait{width:280px}.journey-card{padding:20px}.usage-row{gap:7px;font-size:12px}.usage-cost{font-size:10px}.wordmark{font-size:16px}}
@media(max-height:740px) and (min-width:861px){:root{--header-h:66px}.experience{min-height:calc(100dvh - 102px);padding-top:18px}.portrait{width:330px}.caption{margin-top:16px;min-height:85px}body[data-focus=card] .portrait{width:270px}}
@media(max-width:860px) and (max-height:720px){.portrait{width:245px}.experience{padding-top:24px}}
@media(max-width:860px){body[data-keyboard=open] .experience{min-height:calc(var(--visible-height,100dvh) - 95px);padding-top:8px}body[data-keyboard=open] .portrait,body[data-keyboard=open][data-focus=card] .portrait{width:120px}body[data-keyboard=open] .composer-dock{margin-top:14px}}
/* Reserve the composer before sizing the character; never clip review content. */
.mic-slash{display:none;color:#8dd6ee;stroke-width:1.8}
.voice-control:not([aria-pressed=true]) .mic-slash{display:block}
.usage-breakdown .usage-lines{margin-top:18px}
body[data-focus=conversation] .experience{min-height:calc(100dvh - 109px);padding:18px 0 max(28px,env(safe-area-inset-bottom))}
body[data-focus=conversation] .fox-stage{align-self:center;padding:0}
body[data-focus=conversation] .portrait{width:clamp(220px,calc((100dvh - 410px)*1.22),420px)}
body[data-focus=conversation] .caption{min-height:84px;max-height:min(300px,36dvh);margin-top:16px;width:min(650px,100%)}
body[data-focus=conversation] #caption-text{font-size:clamp(16px,1.5vw,19px);line-height:1.55}
body[data-focus=conversation] .voice-control{width:58px;height:58px}
body[data-focus=conversation] .composer-dock{margin-top:16px}
.user-ack-text,#user-ack-text{overflow-wrap:anywhere;max-height:3em;overflow:auto}
@media(min-width:861px) and (max-height:740px){body[data-focus=conversation] .experience{min-height:calc(100dvh - 83px)}}
@media(max-width:860px){
 body[data-focus=conversation] .experience{min-height:calc(var(--visible-height,100dvh) - 86px);padding:16px 0 max(20px,env(safe-area-inset-bottom));grid-template-rows:1fr auto}
 body[data-focus=conversation] .portrait{width:clamp(160px,calc((var(--visible-height,100dvh) - 440px)*1.22),310px)}
 body[data-focus=conversation] .journey-shell{display:none}
 body[data-focus=conversation] .composer-dock{grid-row:2;margin-top:12px;padding-top:0;position:relative;bottom:auto}
 body[data-keyboard=open][data-focus=conversation] .portrait{width:90px}
}
@media(prefers-reduced-motion:reduce){:root{--stage-time:140ms}*,*::before,*::after{scroll-behavior:auto!important;animation-duration:140ms!important;animation-delay:0ms!important;transition-duration:140ms!important;transition-delay:0ms!important}.journey-shell,.journey-card{transform:none!important}.caption-fragment{animation:none!important}body[data-performance=thinking] .user-ack[data-replied=false] #user-ack-text::after{animation:none!important}}

/* Panels: the questions asked together, one card. The focused field is the one
   RoboFox is currently asking for. */
.panel-card .field-label{margin-top:14px}.panel-card .field-label:first-of-type{margin-top:0}
.panel-card .field-control[data-focus=true] input{border-color:var(--wf-accent,#38bdf8);box-shadow:0 0 0 3px color-mix(in srgb,var(--wf-accent,#38bdf8) 22%,transparent)}
.panel-card .field-control strong{display:block;padding:10px 2px;font-weight:560}
.panel-card input[type=number]{appearance:textfield;-moz-appearance:textfield}
/* Estimate: the savings frame leads; the price on its own never does. */
.savings-frame{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin:6px 0 10px}
.savings-frame strong{display:block;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.6px;line-height:1.1}
.savings-frame small{display:inline-block;font-size:13px;font-weight:500;margin-left:3px;color:var(--wf-muted,#a1a1aa)}
.savings-label{display:block;font-size:12px;line-height:1.35;color:var(--wf-muted,#a1a1aa);margin-bottom:6px}
.savings-today strong{color:var(--wf-muted,#a1a1aa);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:color-mix(in srgb,var(--wf-accent,#38bdf8) 60%,transparent)}
.savings-arrow{font-size:22px;color:var(--wf-accent,#38bdf8)}
.savings-wayfinder strong{color:var(--wf-text,#f4f4f5)}
.savings-delta{margin:0 0 6px;font-size:15px;line-height:1.5}.savings-delta strong{color:var(--wf-accent,#38bdf8)}
.estimate-actions{flex-wrap:wrap}.quiet-card-button{background:transparent;border-color:transparent;color:var(--wf-muted,#a1a1aa)}
/* On a phone the savings still read on one line: today, the arrow, then Wayfinder (visual pass 2026-09-24). */
@media(max-width:860px){.savings-frame{grid-template-columns:minmax(0,1fr) auto minmax(0,1.25fr);gap:10px}.savings-arrow{justify-self:center}}
/* ---- Batch 4 -------------------------------------------------------------------------------
   UI-THEME-1: the breakdown's category colours are tokens, not literals in the card script. */
:root{--wf-cat-1:#3599ee;--wf-cat-2:#10cce5;--wf-cat-3:#dac656;--wf-cat-4:#5f9eae;--wf-cat-5:#49d5b1;--wf-cat-6:#91a9bd;--wf-cat-7:#9dc966;--wf-cat-8:#a5a3df}
/* The stage fits the window (Batch 4; owner, 2026-09-24, D-6 and D-7). On a laptop or desktop at 100%
   zoom nothing scrolls: not the page, not the card's column, not the caption. The stage is as wide as
   the header, so a card's left edge lines up with the logo, and the progress dots sit in the header
   row. While a card is up it owns its column from top to bottom and the chat box moves under RoboFox.
   The fox is sized from the space left over; the notice and the caption
   share one block of fixed height per window size, so the fox never changes size because a line is
   long, and he is the same size beside every card at one window size. Only an opened breakdown may
   still scroll inside the card's column (D-10).
   Visual pass (owner, 2026-09-24, "RoboFox should be more present"): he is bigger, his words smaller
   (15-17px) and the mic smaller (46px in the conversation, 42px beside a card). */
.stage-words{display:flex;flex-direction:column;align-items:center;width:100%;min-height:0}
/* The privacy line under his words (Phase D; the owner's words): small, one line, in the words' own
   block, which is that much taller on a desktop, so his words keep the room they had. */
.privacy-line{flex:none;margin:6px 0 0;font-size:11px;line-height:16px;color:var(--wf-faint);text-align:center}
/* The stage ignores the pointer (.fox-stage pointer-events:none), so the link opts back in. */
.privacy-line a{position:relative;pointer-events:auto;color:var(--wf-muted);text-decoration:underline;text-underline-offset:2px}.privacy-line a:hover{color:var(--wf-text)}
/* Only at the start (owner, 2026-09-25): gone once the business answers are in (journey.js data-privacy). */
body[data-privacy=off] .privacy-line{display:none}
/* The gift said aloud: the Redeem button glows twice, for about two seconds (owner, 2026-09-25). */
@keyframes gift-glow{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--wf-accent) 30%,transparent),0 0 24px color-mix(in srgb,var(--wf-accent) 50%,transparent)}}
body[data-gift=on] #screen [data-card=estimate] [data-action=redeem]{animation:gift-glow .9s ease-in-out 2}
@media(prefers-reduced-motion:reduce){body[data-gift=on] #screen [data-card=estimate] [data-action=redeem]{animation:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--wf-accent) 45%,transparent)}}
@media(min-width:861px){
 body{display:flex;flex-direction:column;height:100dvh}
 .stage-header{flex:none}
 .stage-progress{position:absolute;z-index:9;top:0;left:50%;height:var(--header-h);margin:0;transform:translateX(-50%);display:flex;align-items:center}
 .stage-progress ol{flex:1}.progress-track{top:calc(50% - .5px)}
 #design-label{top:calc(var(--header-h)/2 + 11px)}
 body[data-focus] .experience,body .experience{flex:1 1 auto;min-height:0;grid-template-rows:minmax(0,1fr) auto}
 body[data-focus=card] .experience{padding:14px 0 16px}
 body[data-focus] .fox-stage,body .fox-stage{align-self:stretch;min-height:0;display:grid;grid-template-rows:minmax(96px,1fr) auto auto auto;justify-items:center;align-items:center}
 /* Beside a card, the fox, the mic and his words are one group under the header: on a tall window the
    spare room goes below them, not between them. His box is nearly square there,
    so he is as tall as his column allows. */
 body[data-focus=card] .fox-stage{--fox-fit:min(var(--fox-max),calc(var(--fox-col) / 1.05));grid-template-rows:minmax(110px,var(--fox-fit)) auto auto auto;align-content:start}
 body[data-focus] .portrait,body .portrait{height:100%;width:auto;max-width:100%;max-height:var(--fox-max);min-height:0;transition:height var(--stage-time) var(--stage-ease),max-height var(--stage-time) var(--stage-ease)}
 body[data-focus=card] .portrait{aspect-ratio:1.05;max-height:var(--fox-fit)}
 .stage-words{height:calc(var(--words) + 22px)}
 .stage-words .caption,body[data-focus] .stage-words .caption{flex:1 1 auto;min-height:0;max-height:none}
 body{--words:clamp(150px,26dvh,230px);--fox-max:420px}
 /* The longest lines fit their block with a two-line notice: O10 with the account question (about 360
    characters) with no card up, GOAL-back with E1 (about 400) beside a card. */
 body[data-focus=conversation]{--words:clamp(160px,24dvh,200px)}
 body[data-focus=conversation] .caption{width:min(760px,100%)}
 body[data-focus=conversation] #caption-text{font-size:clamp(15px,1.12vw,17px);line-height:1.5}
 body[data-focus=conversation] .voice-control{width:46px;height:46px}
 body[data-focus=card]{--words:clamp(210px,32dvh,250px);--fox-max:360px}
 body[data-focus=card] .caption{margin-top:10px;padding:0 4px}
 body[data-focus=card] #caption-text{font-size:15px;line-height:1.5}
 body[data-focus=card] .voice-control{width:42px;height:42px}
 .voice-control svg,body[data-focus] .voice-control svg{width:20px;height:20px}
 body[data-focus=card] .voice-status{margin-top:10px}
 body[data-focus=card] .journey-shell{grid-row:1/3;margin-top:0;align-self:stretch;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-bottom:0}
 body[data-focus=card] .journey-shell[data-more=true]{mask-image:linear-gradient(to bottom,#000 calc(100% - 40px),transparent)}
 /* The chat box slides with the fox: centred under the conversation, under RoboFox beside a card. */
 .composer-dock{justify-self:end;width:100%;margin-inline:0;transition:width var(--stage-time) var(--stage-ease)}
 .composer-dock>.composer{width:min(820px,100%);margin-inline:auto}.composer-dock>.user-ack{max-width:min(90%,740px)}
 body[data-focus=card] .composer-dock{width:var(--fox-col);margin-top:12px}
}
/* Narrow laptops and split screens: RoboFox's column gives the card room, and the narrower column wraps
   the longest line once more. */
@media(min-width:861px) and (max-width:1180px){:root{--fox-col:330px;--stage-gap:36px}body[data-focus=card]{--words:clamp(210px,34dvh,262px)}}
.caption[data-more=true]{mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent)}
/* Keep the answer/action easy to find without changing the spoken words. */
#caption-text{color:var(--wf-muted)}
#caption-text span[data-pending]{opacity:.75}
/* Emphasis only: a question or next step keeps the caption's flow, so his words still fit their box. */
#caption-text .caption-prompt{color:var(--wf-accent);font-weight:650}
#caption-text .caption-prompt span[data-pending]{opacity:.85}
@media(min-width:1600px){body{--fox-max:500px}body[data-focus=card]{--fox-max:400px}}
/* UI-LIVE-1: "Mic paused" is information, not an alarm; Start over asks in the page, not in a browser
   dialog. */
.voice-status[data-tone=info]{color:var(--wf-muted)}
.confirm-panel{position:fixed;z-index:60;top:104px;left:50%;width:min(420px,calc(100vw - 32px));transform:translateX(-50%);padding:20px 22px;border:1px solid var(--wf-line-strong);border-radius:16px;background:var(--wf-raised);box-shadow:0 20px 60px var(--wf-shadow-toast)}
.confirm-panel p{margin:0;color:var(--wf-text);font-size:14px;line-height:1.6}.confirm-panel .card-actions{margin-top:18px}
/* UI-MOBILE-1: touch targets and no iOS focus zoom. */
textarea:focus-visible{outline:2px solid var(--wf-accent);outline-offset:3px}
@media(max-width:860px),(pointer:coarse){#screen .estimate-details summary{padding:12px 0;line-height:20px}#screen .card-button{min-height:44px}}
/* Estimate: one line under the usage range says the phone number and texting registration are priced
   inside Wayfinder. */
.estimate-extra{margin:10px 0 0;color:var(--wf-muted);font-size:13px;line-height:1.5}
/* Spacing (owner: "gaps … not spaced out properly"). One segment highlight, not a box in a box; a
   quiet button keeps its own width instead of floating in a stretched row; the savings figures share
   one baseline; the secure-form placeholder is compact. */
.card-actions .quiet-card-button{flex:0 0 auto;padding-inline:12px}
.estimate-actions .quiet-card-button{margin-right:auto;padding-inline:4px}
.estimate-actions .card-button{white-space:nowrap}
.savings-frame{align-items:end}
.savings-arrow{padding-bottom:6px}
.secure-placeholder{grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center}
.secure-placeholder .secure-icon{grid-row:1/3}
/* A panel whose only action is Edit keeps it close to the values, not under an empty band. */
.card-actions:has(>.quiet-card-button:only-child){margin-top:10px}
/* Welcome credit (owner-approved design A, 2026-09-24): the secure card box, then one box, unticked on
   arrival and marked Recommended, that switches on auto-refill with an amount picked in the sentence
   itself; the consent line sits small under the buttons. */
.payment-card .card-help.lead{margin:8px 0 14px}
.payment-card .secure-placeholder{grid-template-columns:auto minmax(0,1fr);padding:12px 16px;gap:2px 14px}
.payment-card .secure-placeholder small{line-height:1.45}
.payment-card .secure-placeholder>span+span,.payment-card .secure-placeholder>small{grid-column:2}
/* The real card field takes the placeholder's place, with its padding. */
.payment-card .card-input{padding:12px 16px}.payment-card .card-secure{font-size:11px;line-height:1.45}
.refill-option{display:grid;grid-template-columns:18px minmax(0,1fr);gap:0 12px;align-items:start;margin-top:14px;padding:13px 16px;border:1px solid var(--wf-line);border-radius:12px;transition:border-color .18s,background .18s}
.refill-option:hover{border-color:var(--wf-line-strong)}
.refill-option[data-refill=on]{border-color:var(--wf-accent);background:color-mix(in srgb,var(--wf-accent) 7%,transparent)}
/* The box sits level with the sentence's first line (owner, 2026-09-25): the body's two lines join the
   row's grid (the box beside the sentence, the help line under it), and every line of the sentence is as
   tall as the amount picker, so the box's top margin centres it on line one at any width. On a phone
   the sentence is a block and the picker sits under it, so line one is plain text. */
.refill-body{display:contents}
.refill-option>input{grid-row:1;align-self:start;width:18px;height:18px;margin:8px 0 0;accent-color:var(--wf-accent);cursor:pointer}
.refill-line{grid-column:2;grid-row:1;margin:0;color:var(--wf-text);font-size:14px;line-height:34px}
.refill-line label{cursor:pointer}
.refill-line select{min-height:34px;margin:0 2px;vertical-align:middle;padding:3px 8px;border:1px solid var(--wf-line-strong);border-radius:8px;background:var(--wf-control-bg);color:var(--wf-text);font:inherit;font-weight:600;cursor:pointer}
.refill-line select:focus{border-color:var(--wf-accent);outline:0;box-shadow:0 0 0 1px var(--wf-accent-focus)}
.refill-help{grid-column:2;margin:4px 0 0;color:var(--wf-muted);font-size:12px;line-height:1.5}
.tag{display:inline-block;margin-left:7px;padding:1px 7px;border:1px solid var(--wf-accent);border-radius:999px;color:var(--wf-accent);font:9px/1.5 GeistMono,monospace;font-style:normal;letter-spacing:.06em;text-transform:uppercase;vertical-align:2px;white-space:nowrap}
.payment-card .card-actions{margin-top:18px}
.card-consent{margin:12px 0 0;color:var(--wf-faint);font-size:11px;line-height:1.55}
@media(max-width:860px),(pointer:coarse){.refill-line{line-height:22px}.refill-line label{display:block}.refill-line select{min-height:44px;margin:8px 2px 0 0}.refill-option>input{width:22px;height:22px;margin-top:0}.refill-option{grid-template-columns:22px minmax(0,1fr)}}
/* D-8 (owner, 2026-09-24): on a phone RoboFox becomes a 112px avatar beside his words while a card is
   up (visual pass: never tiny), and the chat box follows the card instead of covering its buttons. The
   design-sample label takes its own line; answers read as a label/value list; the estimate's buttons
   stack with Redeem first.
   Phone header (owner, 2026-09-24): the mic sits in the header beside the sound button (viewportBehavior
   in stage.js moves it; hidden under RoboFox until then), and his words keep one fixed box, 14px, that
   scrolls with the part being said: 124px beside a card (about six lines of 32 characters, as in the
   approved booking mockup), 84px (four lines) in the conversation, at the finish and with the keyboard
   open. The screen no longer jumps with the length of a line. */
@media(max-width:860px){
 .fox-stage>#voice{display:none}
 body[data-focus=card] .experience{padding-top:12px}
 body[data-focus=card] #design-label{position:static;margin:8px 0 0}
 body[data-focus=card] .fox-stage{display:flow-root;position:relative;text-align:left}
 body[data-focus=card] .fox-stage .portrait{float:left;width:112px;margin:0 12px 2px 0}
 body[data-focus=card] .fox-stage .start-control{clear:both;display:block;margin:10px auto 0}
 body[data-focus] .stage-words .caption{height:84px;min-height:0;max-height:none;margin-top:10px;overflow-y:auto;overscroll-behavior-y:auto;scrollbar-width:none}
 body[data-focus] .stage-words #caption-text{font-size:14px;line-height:1.5}
 body[data-focus=card] .fox-stage .stage-words{display:flow-root;width:auto;text-align:left}
 body[data-focus=card] .stage-words .caption{height:124px;margin-top:0;padding:0}
 body[data-focus=card] .stage-words #caption-text{font-size:14px;line-height:1.45}
 body[data-keyboard=open] .stage-words .caption{height:84px}
 body[data-focus=card] .stage-words .voice-status{margin:0 0 4px;text-align:left}
 /* The privacy line shows at the start only (data-privacy); beside a card on a phone it would wrap in the
    narrow column and push the card's buttons off the first screen, so it rests there too. */
 body[data-focus=card] .privacy-line{display:none}
 body[data-focus=card] .journey-shell{margin-top:14px}
 body[data-focus=card] .composer-dock{margin-top:14px}
 .payment-card.journey-card{padding:20px}
 .journey-card[data-editing=false] .value-grid{gap:0;border-top:1px solid var(--wf-line)}
 .journey-card[data-editing=false] .value-row{flex-direction:row;justify-content:space-between;align-items:baseline;gap:14px;padding:13px 2px;border:0;border-bottom:1px solid var(--wf-line);border-radius:0;background:none}
 .journey-card[data-editing=false] .value-row .value-label{flex:0 1 50%}
 .journey-card[data-editing=false] .value-row .value{flex:1 1 auto;min-width:0;text-align:right}
 .journey-card[data-editing=false] .value-row[data-focus=true] .value-label{color:var(--wf-accent)}
 .estimate-actions{flex-direction:column-reverse;align-items:stretch}
 .estimate-actions .card-button{flex:0 0 auto;width:100%}
 .estimate-actions .quiet-card-button{align-self:center;width:auto;margin:0}
}
/* The finish (owner, 2026-09-24): after the gift is claimed RoboFox comes back big and centred like the
   introduction (body[data-focus=finish]). On a laptop or desktop he stands in the middle of the window;
   the "You're in" card keeps a card's place at the logo edge on his left and his words sit on his
   right, so he can be as big as in the introduction and nothing scrolls. On a phone he is centred
   above his words and the card, and the page scrolls if it must. */
body[data-focus=finish] .journey-shell{opacity:1;transform:none}
body[data-focus=finish] #caption-text{font-size:clamp(15px,1.12vw,17px);line-height:1.5}
@media(min-width:861px){
 body[data-focus=finish]{--side:clamp(280px,24vw,320px);--finish-gap:40px}
 body[data-focus=finish] .experience{grid-template-columns:var(--side) minmax(0,1fr) var(--side);column-gap:var(--finish-gap);padding:14px 0 16px}
 body[data-focus=finish] .journey-shell{grid-column:1;grid-row:1;align-self:center;max-height:100%;margin:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
 /* His column is what the card and his words leave; his box is nearly square, as beside a card. */
 body[data-focus=finish] .fox-stage{--fox-fit:min(var(--fox-max),calc((min(1200px,100vw - 72px) - 2 * var(--side) - 2 * var(--finish-gap)) / 1.05));grid-column:2/4;grid-row:1;grid-template-columns:minmax(0,1fr) var(--side);grid-template-rows:minmax(110px,var(--fox-fit)) auto auto;column-gap:var(--finish-gap);align-content:center;justify-self:stretch;width:100%;padding:0}
 body[data-focus=finish] .portrait{grid-column:1;grid-row:1;aspect-ratio:1.05;max-height:var(--fox-fit)}

 body[data-focus=finish] .voice-control{grid-column:1;grid-row:2;width:46px;height:46px;margin-top:4px}
 body[data-focus=finish] .start-control{grid-column:1;grid-row:3}
 body[data-focus=finish] .stage-words{grid-column:2;grid-row:1/-1;align-self:center;align-items:stretch;height:auto;max-height:100%;text-align:left}
 body[data-focus=finish] .stage-words .caption{width:100%;margin-top:10px;padding:0}
 body[data-focus=finish] .voice-status{max-width:none}
 body[data-focus=finish] .composer-dock{grid-column:1/-1;grid-row:2;margin-top:12px}
 /* The card's column is narrow: its buttons stack, the main one first. */
 body[data-focus=finish] .finish-card .finish-foot .card-actions{flex:1 1 100%;flex-direction:column-reverse}
 body[data-focus=finish] .finish-card .finish-foot .card-button{flex:none;width:100%}
 /* The same for the booked card at the estimate (owner, 2026-09-25): Redeem first, Show my estimate under. */
 body[data-focus=finish] #screen .bk-booked .bk-actions{grid-template-columns:1fr}
 body[data-focus=finish] #screen .bk-booked .bk-actions [data-action=redeem]{order:-1}
}
@media(min-width:861px) and (max-width:1180px){body[data-focus=finish]{--finish-gap:28px}}
@media(max-width:860px){
 body[data-focus=finish] .portrait{width:min(240px,62vw)}
 body[data-focus=finish] .caption{width:min(720px,100%)}
 body[data-focus=finish] .journey-shell{grid-column:1/-1;grid-row:2;justify-self:center;width:min(720px,100%);margin-top:16px}
 body[data-focus=finish] .composer-dock{position:relative;bottom:auto}
}
/* The "You're in" card is compact, so RoboFox keeps his room above it: three short steps, then how to
   reach us and the one button on a row. */
.finish-card .card-kicker{margin-bottom:8px}
.finish-card h1{margin-bottom:0}
.finish-steps{display:grid;gap:6px;margin:12px 0 0;padding:0;list-style:none;counter-reset:finish-step}
.finish-steps li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:11px;align-items:start;color:var(--wf-text);font-size:14px;line-height:1.5;counter-increment:finish-step}
.finish-steps li::before{content:counter(finish-step);display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border:1px solid var(--wf-line-strong);border-radius:50%;color:var(--wf-muted);font:10px/1 GeistMono,monospace}
.finish-steps li[data-tone=active]::before,.finish-steps li[data-tone=pending]::before{border-color:var(--wf-accent);color:var(--wf-accent)}
.finish-steps li[data-tone=pending]::before{animation:fox-thinking 1.6s ease-in-out infinite}
.finish-steps li[data-tone=done]::before{content:"\2713";border-color:var(--wf-success);color:var(--wf-success);font-size:12px}
.finish-steps li[data-tone=muted]{color:var(--wf-muted)}
.finish-steps li[data-tone=danger]{color:var(--wf-danger)}.finish-steps li[data-tone=danger]::before{border-color:var(--wf-danger);color:var(--wf-danger)}
.finish-steps strong{font-weight:600;overflow-wrap:anywhere}
.finish-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;margin-top:14px;padding-top:14px;border-top:1px solid var(--wf-line)}
.finish-help{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;font-size:13px;line-height:1.6}
.finish-help-label{color:var(--wf-muted)}
.finish-help a{color:var(--wf-accent);overflow-wrap:anywhere}.finish-help a:hover{text-decoration:underline;text-underline-offset:3px}
.finish-card .finish-foot .card-actions{margin-top:0;flex:0 1 auto}
@media(max-width:860px){.finish-card .finish-foot .card-actions{flex:1 1 100%}.finish-help a{min-height:44px;display:inline-flex;align-items:center}}
/* One short confetti burst when the gift is claimed (celebrate() in journey.js): never under reduced
   motion, never in the way of a click, removed after about three seconds. */
.confetti{position:fixed;inset:0;z-index:70;overflow:hidden;pointer-events:none}
.confetti i{position:absolute;top:-14px;left:var(--x);width:7px;height:12px;border-radius:2px;background:var(--tone);opacity:0;animation:confetti-fall var(--fall) cubic-bezier(.2,.6,.4,1) var(--delay) forwards}
.confetti i:nth-child(3n){width:10px;height:6px}.confetti i:nth-child(4n){width:7px;height:7px;border-radius:50%}
@keyframes confetti-fall{0%{opacity:1;transform:translate3d(0,0,0) rotate(0deg)}80%{opacity:1}100%{opacity:0;transform:translate3d(var(--drift),88vh,0) rotate(var(--spin))}}
@media(prefers-reduced-motion:reduce){.confetti{display:none}}
/* All the answers (Review details) on a desktop, with the lock line and an Edit row open (B2): the two
   help lines sit together, the rows are compact, and an open row keeps its input, Cancel and Save on one
   line where the row is wide enough, so the card fits beside RoboFox without scrolling. */
@media(min-width:861px){
 #screen .review-card>.card-help{margin:6px 0 4px}#screen .review-card>.lock-line{margin:0 0 12px}
 #screen .review-card .value-grid{gap:6px}#screen .review-card .value-row{gap:4px;padding-block:8px}
 #screen .review-card .row-editor input{flex-basis:120px}
}
/* A short desktop window (a 1280x720 screen leaves about 600px under the browser's tabs and address
   bar): the cards and the caption tighten, so the welcome credit with an amount and the longest line
   still fit without scrolling. Last in the file, so it wins over the card rules above. */
@media(min-width:861px) and (max-height:660px){
 :root{--header-h:60px}body[data-focus=card] .experience{padding:10px 0 12px}
 body[data-focus=card] #caption-text{font-size:14px}body[data-focus=conversation] #caption-text{font-size:15px}
 #screen .journey-card{padding:22px 28px}#screen .card-kicker{margin-bottom:8px}#screen .journey-card h1{margin-bottom:8px}
 .payment-card .card-help.lead{margin:6px 0 10px}.payment-card .secure-placeholder{padding:9px 14px}
 .payment-card .card-field{gap:4px}.payment-card .card-input{padding:11px 14px}
 .refill-option{margin-top:10px;padding:10px 14px}.payment-card .card-actions{margin-top:14px}.card-consent{margin-top:10px}
 /* All the answers (Review details) keep their buttons on screen. */
 #screen .value-grid{gap:6px}#screen .value-row{gap:3px;padding:7px 12px}#screen .review-card .card-actions{margin-top:10px}
 #screen .review-card .value-grid{gap:4px}#screen .review-card .value-row{gap:3px;padding-block:5px}#screen .review-card .row-editor input{min-height:36px}
}

/* One calm stage, shared visually with full-screen RoboFox (2026-09-30).
   Layout rules above still reserve room for complete captions, notices, consent
   and cards on short screens. These controls change presentation only. */
#viewport .fox-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 88%}
#viewport .fox-fallback[hidden]{display:none}
.stage-progress i{background:var(--wf-line-strong)}
.stage-progress li[aria-current=step] i{box-shadow:none}
body[data-focus] .voice-control{display:flex;align-items:center;justify-content:center;gap:10px;width:auto;max-width:100%;min-height:44px;height:auto;padding:10px 20px;border:1px solid var(--wf-line-strong);border-radius:999px;background:var(--wf-control-bg);color:var(--wf-text);box-shadow:none;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;transform:none}
body[data-focus] .voice-control:hover{background:var(--wf-raised);box-shadow:none;transform:none}
body[data-focus] .voice-control[aria-pressed=true]{background:var(--wf-control-bg);border-color:var(--wf-accent);box-shadow:0 0 0 calc(var(--mic-level,0)*8px) color-mix(in srgb,var(--wf-accent) 12%,transparent)}
body[data-focus] .voice-control[data-connecting=true]{border-style:dashed}
.voice-control svg{flex:none}
#voice-label{max-width:260px}
body .stage-header #voice{width:44px;height:44px;min-height:44px;padding:0}
/* The live mic keeps its circle in the compact header; a short cue below it makes mute discoverable. */
.stage-header #voice-label{position:absolute;left:50%;top:calc(100% + 5px);transform:translateX(-50%);max-width:none;white-space:nowrap;font-size:10px;font-weight:450;line-height:1.3;color:var(--wf-muted);letter-spacing:0;pointer-events:none}
.stage-header #voice-label:not([data-live=true]){display:none}
.journey-card{background:var(--wf-surface);border-color:var(--wf-line);box-shadow:none;animation:none}
.journey-card>.card-kicker,.journey-card>h1,.journey-card>.card-help,.answer-grid,.journey-card>.card-actions{animation:none}
.card-kicker{color:var(--wf-muted)}
.primary-card-button{background:var(--wf-accent);color:var(--wf-accent-ink);border-color:var(--wf-accent);box-shadow:none}
.secondary-card-button{background:transparent;border-color:var(--wf-line-strong)}
.secondary-card-button:hover{background:var(--wf-raised)}
.composer,body[data-focus=card] .composer{background:var(--wf-control-bg);border-color:var(--wf-line);box-shadow:none}
.composer:focus-within{border-color:var(--wf-accent);box-shadow:none}
.send-control{background:var(--wf-raised);color:var(--wf-text);border-color:var(--wf-line)}
.send-control:hover{background:var(--wf-line);color:var(--wf-text)}
.send-control:disabled{background:var(--wf-control-bg)}
/* Important actions are already prominent; decoration adds no information. */
body[data-gift=on] #screen [data-card=estimate] [data-action=redeem]{animation:none;box-shadow:none}
/* Keep the complete payment consent above the fold on a standard phone without
   reducing its type size or the 44px payment controls. */
@media(max-width:860px){
 .payment-card.journey-card{padding-block:16px}
 .payment-card .card-actions{margin-top:12px}
 .payment-card .card-consent{margin-top:8px}
}
/* Functional listening feedback stays: a small level ring and the shared fox's
   responsive eyes. Decorative orbital animation is still absent. */
body[data-focus] .voice-control[aria-pressed=true]{border-color:var(--wf-accent);box-shadow:0 0 0 calc(1px + var(--mic-level,0)*3px) color-mix(in srgb,var(--wf-accent) 18%,transparent)}
body[data-focus] .voice-control[data-connecting=true]{border-style:dashed}
@media(prefers-reduced-motion:reduce){body[data-focus] .voice-control[aria-pressed=true]{box-shadow:0 0 0 2px color-mix(in srgb,var(--wf-accent) 18%,transparent)}}

/* One quiet choice keeps the fox and its voice together. */
.fox-persona-control{flex:none;display:block;margin:0 0 6px;text-align:center}
.fox-persona-control select{min-height:44px;max-width:100%;padding:6px 22px 6px 12px;border:1px solid transparent;border-radius:10px;background:var(--wf-bg);color:var(--wf-muted);font:inherit;font-size:12px;cursor:pointer}
.fox-persona-control select:focus-visible{outline:2px solid var(--wf-accent);outline-offset:2px}
.fox-persona-control select:disabled{opacity:.55;cursor:wait}
/* On a phone a card owns the screen: the fox choice waits in the conversation, so an open
   Edit row never scrolls the header's mic away. */
@media(max-width:860px){body[data-focus=card] .fox-persona-control{display:none}}