:root{font-family:system-ui,-apple-system,sans-serif;color:#163349;background:#f0f8ff;font-size:17px}*{box-sizing:border-box}body{margin:0}header{background:#0879d2;color:white;padding:18px max(18px,calc((100% - 940px)/2));display:flex;align-items:center;justify-content:space-between;gap:16px}header a{color:white}main{max-width:940px;margin:auto;padding:28px 18px 70px}h1{font-size:clamp(1.8rem,5vw,2.5rem);margin:12px 0}h2{font-size:1.35rem}p,li{line-height:1.6}a{color:#075ea3}button,.button{border:0;border-radius:12px;background:#0069bb;color:white;padding:13px 18px;font:inherit;font-weight:650;min-height:48px;cursor:pointer;display:inline-block;text-decoration:none}button:disabled{background:#60798a;cursor:default}.secondary{background:#e4f2fd;color:#07528a}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #dc9500;outline-offset:3px}label{display:block;margin:12px 0}input:not([type=checkbox]),select{display:block;width:100%;min-height:48px;padding:10px;border:1px solid #8caabb;border-radius:9px;font:inherit;background:white;color:#163349}input[type=checkbox]{width:22px;height:22px;vertical-align:middle;margin:0 9px 0 0}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.card{background:white;border:1px solid #c5deed;border-radius:20px;padding:24px;margin:18px 0;overflow-wrap:anywhere}.grid .card{margin:0}.tag{font-size:.85rem;font-weight:750;color:#0866a8;letter-spacing:.06em}.price{font-size:1.6rem;font-weight:750}.muted,small{color:#4c6575}.notice{border-left:4px solid #0077c8;background:#dff0fc;padding:15px 18px;border-radius:8px}#message{position:sticky;top:8px;z-index:2;white-space:pre-line}#message:empty{display:none}#message.error{border-color:#2663b2;background:#ecf4ff;color:#194074}.actions{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0}details{border-top:1px solid #cfdeea;padding:17px 0}summary{font-weight:650;cursor:pointer;min-height:30px}.row{border-bottom:1px solid #dce7ef;padding:16px 0}.row:last-child{border:0}.row p{margin:6px 0}[hidden]{display:none!important}code{overflow-wrap:anywhere}footer{margin-top:30px;font-size:.9rem}.check{display:flex;align-items:flex-start;gap:4px}.check input{flex:none;margin-top:4px}.check span{line-height:1.5}@media(max-width:620px){.grid{grid-template-columns:1fr}.card{padding:19px}header{flex-wrap:wrap}.actions>*{flex:1;text-align:center}h1{font-size:1.9rem}}
:root{--billing-safe-top:var(--vobix-safe-top,env(safe-area-inset-top,0px));--billing-safe-bottom:var(--vobix-safe-bottom,env(safe-area-inset-bottom,0px))}
body>header{padding-top:calc(18px + var(--billing-safe-top))}
body>main{padding-bottom:calc(70px + var(--billing-safe-bottom))}
#message{top:calc(8px + var(--billing-safe-top))}


.planChoices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.planChoice{display:flex;flex-direction:column;gap:7px;padding:16px 10px;background:#fff;color:#16465f;border:2px solid #cee0ec;border-radius:16px;text-align:center}.planChoice[aria-pressed=true]{border-color:#0786db;background:#e8f4ff}.planChoice span{font-size:14px;font-weight:400}.planChoice b{font-size:18px}.selectedPlan>span{font-size:12px;font-weight:700;letter-spacing:.06em;color:#0675bd}.selectedPlan .price{margin:12px 0}.selectedPlan h2{margin-top:8px}#ownerBilling a{font-size:14px}


/* 2026-10-05 investor-demo polish: compact, centered and consistent with Vobix menus. */
body.appCompactPage{
 background:#f4f9fc;
 color:#123d57;
}
body.appCompactPage>header{
 position:sticky;
 top:0;
 z-index:3;
 background:#fff;
 color:#123d57;
 border-bottom:1px solid #d7e8f3;
 box-shadow:0 1px 0 rgba(18,61,87,.03);
}
body.appCompactPage>header a{
 color:#168dcc;
 text-decoration:none;
 font-weight:700;
}
body.appCompactPage>main{
 width:min(720px,100%);
 margin-inline:auto;
 padding-top:18px;
}
body.appCompactPage>main>.tag,
body.appCompactPage>main>h1,
body.appCompactPage>main>.price,
body.appCompactPage>main>h1+ p,
body.appCompactPage>main>.price+ p{
 text-align:center;
}
body.appCompactPage>main>.tag{
 margin:4px auto 6px;
 font-size:12px;
 letter-spacing:.08em;
}
body.appCompactPage>main>h1{
 margin:4px auto 8px;
 color:#123d57;
 font-size:clamp(26px,7vw,34px);
 line-height:1.15;
 overflow-wrap:normal;
 word-break:normal;
}
body.appCompactPage>main>.price{
 margin:6px auto 8px;
 color:#0879d2;
 font-size:28px;
 line-height:1.15;
}
body.appCompactPage .card{
 border:1px solid #d7e8f3;
 border-radius:18px;
 background:#fff;
 padding:18px;
 box-shadow:0 8px 24px rgba(16,63,96,.06);
 overflow-wrap:break-word;
}
body.appCompactPage .card :is(h2,h3,b,strong,summary){
 overflow-wrap:normal;
 word-break:normal;
 hyphens:none;
}
body.appCompactPage .card h2{
 color:#123d57;
 margin-top:0;
}
body.appCompactPage .planChoices{
 gap:10px;
 margin:14px 0;
}
body.appCompactPage .planChoice{
 min-width:0;
 min-height:104px;
 justify-content:center;
 border:1px solid #cce1ef;
 border-radius:16px;
 background:#fff;
 box-shadow:none;
}
body.appCompactPage .planChoice b{
 color:#123d57;
 font-size:16px;
 line-height:1.25;
 overflow-wrap:normal;
 word-break:normal;
}
body.appCompactPage .planChoice .price,
body.appCompactPage .planChoice strong{
 color:#0879d2;
 white-space:nowrap;
}
body.appCompactPage .actions{
 gap:8px;
}
body.appCompactPage .actions>*{
 min-width:0;
}
@media(max-width:520px){
 body.appCompactPage>main{padding-inline:14px}
 body.appCompactPage .card{padding:15px}
 body.appCompactPage .planChoices{grid-template-columns:1fr 1fr}
 body.appCompactPage .planChoice{padding:12px 8px}
}
@media(max-width:340px){
 body.appCompactPage .planChoices{grid-template-columns:1fr}
}


/* 2026-10-07: compact and centered subscription access card on mobile. */
body.appCompactPage #accessCard{
 text-align:center;
}
body.appCompactPage #accessCard h2{
 margin-bottom:10px;
 font-size:1.22rem;
 line-height:1.2;
}
body.appCompactPage #accessCard #subscriptions{
 font-size:.96rem;
 line-height:1.45;
}
body.appCompactPage #accessCard #subscriptions p{
 margin:8px 0 12px;
}
body.appCompactPage #accessCard .actions{
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:9px;
 margin:12px 0;
}
body.appCompactPage #accessCard .actions button{
 width:100%;
 min-width:0;
 min-height:46px;
 padding:10px 8px;
 font-size:.90rem;
 line-height:1.18;
 text-align:center;
 overflow-wrap:normal;
 word-break:normal;
 hyphens:none;
}
body.appCompactPage #accessCard .muted{
 margin:10px 0 0;
 font-size:.90rem;
 line-height:1.42;
 text-align:center;
 overflow-wrap:normal;
 word-break:normal;
}
@media(max-width:520px){
 body.appCompactPage #accessCard{
  padding:14px 12px;
 }
 body.appCompactPage #accessCard h2{
  font-size:1.14rem;
 }
 body.appCompactPage #accessCard #subscriptions,
 body.appCompactPage #accessCard .muted{
  font-size:.86rem;
 }
 body.appCompactPage #accessCard .actions button{
  font-size:.82rem;
  padding:9px 6px;
 }
}
@media(max-width:360px){
 body.appCompactPage #accessCard .actions{
  grid-template-columns:1fr;
 }
}

body.appCompactPage #products{scroll-margin-top:calc(88px + var(--billing-safe-top))}
body.appCompactPage #products>.selectedPlan{margin-top:10px}
body.appCompactPage .selectedPlan h2{font-size:24px;margin:6px 0}
body.appCompactPage .selectedPlan>p{font-size:15px;line-height:1.5;margin:10px 0}
body.appCompactPage .selectedPlan .price{font-size:28px;font-weight:750;color:#0879d2}
body.appCompactPage .selectedPlan .actions{display:grid;grid-template-columns:1fr;margin-bottom:8px}
body.appCompactPage .selectedPlan #paySelectedPlan{min-height:48px;font-size:16px}
body.appCompactPage .changePlan,body.appCompactPage .storePaymentHelp{padding:12px;border:1px solid #d7e8f3;border-radius:14px;background:#fff;margin:10px 0}
body.appCompactPage .changePlan>summary,body.appCompactPage .storePaymentHelp>summary{min-height:44px;display:flex;align-items:center;justify-content:space-between;color:#0874bc}
body.appCompactPage .changePlan>summary::after,body.appCompactPage .storePaymentHelp>summary::after{content:'⌄'}
body.appCompactPage .storePaymentHelp .card{margin:0;padding:12px;border:0!important;box-shadow:none}
body.appCompactPage .storePaymentHelp h2{font-size:17px}
body.appCompactPage .storePaymentHelp p{font-size:14px}
body.appCompactPage #availability{font-size:13px;line-height:1.45;padding:10px 12px;margin:10px 0}