/* Alpha X website, slice S1: additions to the prototype look (loaded last). Same tokens as styles.css. */

/* top note on every page of the internal build */
.preview-note{background:var(--o);color:var(--ink);font-size:var(--fs-s);font-weight:600;text-align:center;padding:4px var(--s3)}

/* language switch = links to the same page in the other language */
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:var(--dt);font:600 15px var(--f-body);border-radius:99px;padding:0 6px;text-decoration:none;transition:background .2s ease}
.lang a[lang=lo]{font-family:var(--f-lao)}
.lang a[lang=zh-Hans]{font-family:var(--f-zh)}
.lang a[aria-current="true"]{color:var(--dk);background:var(--chip);box-shadow:inset 0 0 0 2px var(--dt)}
@media(hover:hover){.lang a:hover{background:var(--soft)}}

/* logo: header picture and footer tile (white, so the dark teal mark stays readable) */
.brand img{display:block;height:36px;width:auto}
@media(min-width:900px){.brand img{height:40px}}
.logo-tile{display:inline-block;background:#fff;border-radius:var(--r-m);padding:var(--s3)}
.logo-tile img{display:block;width:96px;height:auto}

/* footer notes */
.ai-note{margin-top:var(--s2);font-size:var(--fs-s);color:var(--ondark)}
body{overflow-wrap:break-word}
:is(h1,h2,h3,p,li,a,.btn,.cb,article,.kc-text){overflow-wrap:anywhere}
.site-footer .legal{overflow-wrap:anywhere}

/* photos: real image, label "Illustration" for free-licence stock pictures */
.ph.has-img{position:relative;display:block;padding:0;min-height:0;background:var(--chip);overflow:hidden;aspect-ratio:3/2}
.ph.has-img img{display:block;width:100%;height:100%;object-fit:cover}
.pc .ph.has-img{border-radius:0}
.ph.tall.has-img{aspect-ratio:3/4}
.svc .ph.has-img{border-radius:var(--r-s);margin-bottom:var(--s2)}
.ph .ill{position:absolute;left:var(--s2);top:var(--s2);background:rgba(10,63,58,.88);color:#fff;font-size:12px;font-weight:700;line-height:1.5;padding:1px 10px;border-radius:99px}
.ph.todo{aspect-ratio:3/2;min-height:0}
.ph.tall.todo{aspect-ratio:3/4}

/* contact block (replaces the quotation form in S1) */
.quote-block{display:grid;gap:var(--s3);padding:var(--s4);border-radius:var(--r-m);background:var(--soft);border-left:6px solid var(--o);margin-top:var(--s4)}
.quote-block h2{margin-bottom:0}
.quote-block .btns{margin-top:var(--s2)}
.quote-block .btns .btn{flex:1 1 220px}
.contact-list a{overflow-wrap:anywhere}

/* contact panel opened by the chat bubble */
.chat-acts{display:grid;gap:var(--s2);padding:var(--s2) var(--s3) var(--s3);background:#fff;border-top:1px solid var(--line)}
.chat-acts .btn{min-height:48px}
.chat{height:auto;max-height:88vh}
.chat-log{flex:0 1 auto}

/* lists and steps */
.steps{display:grid;gap:var(--s2);margin-top:var(--s3);counter-reset:st;max-width:60ch}
.steps li{counter-increment:st;display:flex;align-items:center;gap:var(--s3);min-height:48px;padding:var(--s2) var(--s3);background:var(--soft);border-radius:var(--r-s)}
.steps li::before{content:counter(st);flex:none;width:32px;height:32px;border-radius:50%;background:var(--dt);color:#fff;font-weight:700;display:grid;place-items:center}
.plain{display:grid;gap:var(--s2);margin-top:var(--s2);list-style:disc;padding-left:var(--s4);max-width:60ch}

/* no JavaScript: the savings dashboard needs it, so it is hidden and a note shows */
html:not(.js) .kform{display:none}
.nojs{margin-top:var(--s3);color:var(--ondark)}
.js .nojs{display:none}