/* Hera · The Living Menu — the online booking page (master plan §1, the starting point, §4, §4.8), in Hera's own
   Signature Service Menu design: parchment, a brown-leather book with a gold inner frame, cream pages, Cormorant
   Garamond with Jost, gold serif prices. One page and one card: Hera writes her visit onto it; she taps a time and Book.
   Prices always incl. GST. A single light look by the owner's choice (plan decision 18). */
/* The colours, fonts and the gold of the buttons are the one look of every client page: hera-look.css (linked before this file). */
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
button,input,textarea,select{font:inherit;color:inherit}
/* words that sit inside a sentence or a small label stay words: the 44px tap rule of hera-look.css does not apply to a link inside a
   sentence (WCAG 2.5.8), and would push the lines of the sentence apart */
.inl,.row .n small button{min-height:0}
input,textarea,select{font-size:16px}   /* the same as hera-look.css, said again because font:inherit above would undo it (an iPhone zooms in below 16px) */
button{cursor:pointer;background:none;border:0;text-align:inherit}
a{color:var(--gold)}
.sheet h3:focus{outline:none}
/* words for a screen reader only (what changed, read out): unseen on screen */
.srl{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.frame{z-index:0}
.frame::after{content:"";position:absolute;inset:4px;border:1px solid rgba(200,169,107,.16)}

.app{position:relative;z-index:1;max-width:480px;margin:0 auto;min-height:100svh;display:flex;flex-direction:column;
  padding-top:calc(18px + env(safe-area-inset-top,0px))}
.top{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 24px 0}
/* the official logo, left; the language and the salon beside it in one row (the header is the logo's height). Each is a 44px target */
.brand{display:block;flex:none;min-height:44px;line-height:0;text-decoration:none}
.brand picture{display:block}
.brand img{display:block;width:112px;height:auto}
.top .r{display:flex;flex-wrap:nowrap;justify-content:flex-end;align-items:center;gap:0 10px;flex:1 1 0;min-width:0}
.callbtn{flex:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--gold);border-radius:50%;color:var(--gold);text-decoration:none}
.callbtn svg{width:18px;height:18px}
.top .r button{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:2px 0;display:flex;align-items:center;gap:4px}
.top .r button{white-space:normal;min-width:44px;max-width:104px;text-align:right;line-height:1.15;justify-content:flex-end}
.top .r button.salon{color:var(--gold)}
.top .r svg{width:8px;height:8px}
@media(max-width:380px){.top{padding:4px 16px 0;gap:6px}.brand img{width:96px}.top .r{gap:0 8px}.top .r button{letter-spacing:.06em}}
@media(max-width:340px){.brand img{width:88px}.top .r button{letter-spacing:.04em;gap:3px}}

:lang(ta) .top .r button,:lang(hi) .top .r button,:lang(zh) .top .r button,:lang(ja) .top .r button,:lang(ko) .top .r button{letter-spacing:0;font-size:9px}
/* the two lines of what we promise: close under the header, close to each other; each is still a 44px target (its box reaches past its line: margins of -14px keep the lines close) */
.vows{margin:2px 20px 0;padding:4px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;
  font:400 8px/1.6 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.vows button{letter-spacing:inherit;text-transform:inherit;font-size:inherit;color:inherit;display:inline-flex;align-items:center;vertical-align:middle;min-height:44px;margin:-14px 0;padding:0}
.vows i{font-style:normal;color:var(--gold-bright);margin:0 6px;font-size:6px;vertical-align:1px}

.hello{padding:16px 24px 0}
.tagrow{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tag{display:flex;align-items:center;gap:8px;font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.seal{width:19px;height:19px;border-radius:50%;background:var(--grad);color:var(--on-gold);font:600 11px/19px var(--serif);text-align:center;letter-spacing:0;
  box-shadow:0 0 0 3px rgba(200,169,107,.18);flex:none}
.notyou{font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);text-decoration:underline;text-underline-offset:4px}
.people{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 12px;max-width:62%}
.people .notyou:not(:last-child){color:var(--gold)}
.hello h1{font:300 34px/1.05 var(--serif);color:var(--ink);margin-top:10px;letter-spacing:-.005em;text-wrap:balance}
.hello h1 em{font-style:italic;font-weight:400;background:linear-gradient(118deg,#6E521B,#B08A3E 45%,#7C5F22 70%,#9C7A33);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hello h1 em.b{display:block}
.say{font:italic 400 18.5px/1.4 var(--serif);color:var(--ink-soft);margin-top:7px}
.say b{font-weight:500;color:var(--gold)}
.her{margin:16px 24px 0 60px;text-align:right}
.her q{display:block;font:italic 400 18px/1.4 var(--serif);color:var(--ink);quotes:"\201C" "\201D"}
.her small{display:inline-block;margin-top:5px;font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}

/* the leather book with the cream page */
.book{margin:16px 16px 0;padding:9px 9px 10px 12px;border-radius:4px 9px 9px 4px;position:relative;
  background:radial-gradient(130% 120% at 18% -10%,var(--leather-a) 0%,var(--leather-b) 58%,var(--leather-c) 100%);
  box-shadow:0 18px 38px rgba(92,66,24,.3),0 3px 8px rgba(92,66,24,.22),inset 0 0 0 1px rgba(255,236,190,.08)}
.book::before{content:"";position:absolute;left:3px;top:6px;bottom:6px;width:3px;border-radius:2px;
  background:linear-gradient(180deg,#8f6d2c,#e2c27a 30%,#b8913e 60%,#e2c27a 85%,#8f6d2c)}
.book::after{content:"";position:absolute;inset:4px 4px 4px 8px;border:1px solid rgba(214,178,98,.5);border-radius:2px 6px 6px 2px;pointer-events:none}
.page{position:relative;z-index:1;background:linear-gradient(180deg,var(--page),var(--page-2));padding:16px 16px 12px;
  box-shadow:inset 0 0 0 1px rgba(154,122,48,.1),inset 0 0 36px rgba(214,190,140,.22)}
.corner{position:absolute;width:14px;height:14px;color:var(--gold-bright);opacity:.9;pointer-events:none}
.corner svg{width:100%;height:100%;display:block}
.corner.a{top:5px;left:5px}.corner.b{top:5px;right:5px;transform:scaleX(-1)}
.corner.c{bottom:5px;left:5px;transform:scaleY(-1)}.corner.d{bottom:5px;right:5px;transform:scale(-1,-1)}
.ey{display:flex;align-items:center;justify-content:center;gap:10px;font-size:8.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);text-align:center;line-height:1.5}
.ey::before,.ey::after{content:"";height:1px;width:20px;flex:none;background:linear-gradient(90deg,transparent,var(--gold-bright))}
.ey::after{transform:scaleX(-1)}
.why{text-align:center;font:italic 400 14.5px/1.4 var(--serif);color:var(--muted);margin-top:5px}
.orn{display:flex;align-items:center;justify-content:center;gap:7px;margin:9px 0 2px}
.orn i{height:1px;width:34px;background:linear-gradient(90deg,transparent,rgba(200,169,107,.8))}
.orn i:last-child{transform:scaleX(-1)}
.orn b{width:5px;height:5px;background:var(--gold-bright);transform:rotate(45deg)}

.row{display:flex;align-items:baseline;gap:10px;padding:10px 0 9px;border-bottom:1px solid var(--line);position:relative;width:100%}
.row .n{flex:1;min-width:0;font:400 15px/1.3 var(--sans);color:var(--ink-soft)}
.row .n small{display:block;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:3px}
.row .n small button{font-size:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--faint);text-decoration:underline;text-underline-offset:3px}
.row .n .rz,.row .n .nx{display:block;font:italic 400 14.5px/1.3 var(--serif);color:var(--muted);margin-top:3px}
.row .p{font:500 19px/1 var(--serif);color:var(--gold);white-space:nowrap;font-variant-numeric:lining-nums}
.row .p small{font:italic 400 13px var(--serif);color:var(--faint);margin-right:3px}
/* the round x and the Add pill keep the size they are drawn at; a finger still gets 44px, through a see-through hit area around each
   (hera-look.css's 44px minimum is switched off for them: it would turn the circle into a tall oval) */
.row .x{position:relative;min-height:0;width:24px;height:24px;flex:none;border-radius:50%;font-size:13px;line-height:22px;text-align:center;color:var(--faint);border:1px solid var(--line-2);align-self:center}
.row .x::before{content:"";position:absolute;inset:-11px}
.ex .add::before{content:"";position:absolute;inset:-7px -4px}
button.row{text-align:left}
button.row:hover{background:rgba(154,122,48,.05)}
.sec-h{font:italic 400 17px var(--serif);color:var(--ink-soft);margin-top:14px}
.sec-h + .row{border-top:0}
/* owner, 9 Oct: a note said once, above the services it is about */
.sec-note{font-size:11.5px;line-height:1.45;color:var(--muted);margin:2px 0 4px}
/* the menu in three levels (owner, 9 Oct): a group and its one line; a sub-group, how many services and the first
   names in it; each a whole row to tap, at least 56px high, its arrow on the right */
.row.grp,.row.sub{align-items:center;min-height:56px;padding:12px 0 11px}
.row.grp .n b,.row.sub .n b{display:block;font:500 19px/1.2 var(--serif);color:var(--ink)}
.row.grp .p,.row.sub .p{font:400 24px/1 var(--serif);color:var(--gold);padding-left:4px}
.row.sub .n .rz{font-size:14px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}   /* two lines at most */
.row.sub .p.fp{font:500 17px/1.15 var(--serif);text-align:right;padding-left:6px;max-width:7.5em;white-space:normal}   /* "from S$45.00", or the one service's own price */
.row.sub .p.fp small{display:block;margin:0 0 2px}
.row.sub.one .n small{margin-top:3px}
.about{text-align:center;font:italic 400 16px/1.45 var(--serif);color:var(--muted);margin:8px 6px 6px;text-wrap:balance}
.sec-title{text-align:center;font:400 27px/1.15 var(--serif);color:var(--ink);margin-top:8px;text-wrap:balance}
.subs{margin-top:4px}
.hint.see{padding-top:10px}

.who{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);width:100%;position:relative}
.ring{position:relative;width:48px;height:48px;border-radius:50%;flex:none;padding:2px}
.ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,#6e5423,#f0ddb0,#c8a96b,#fff6e0,#9a7a30,#e2c99a,#6e5423);animation:spin 7s linear infinite}
.ring img,.ring span{position:relative;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 18%;border:2px solid var(--page);display:block;background:#E8DDC4}
.ring span{display:grid;place-items:center;font:400 20px var(--serif);color:var(--gold)}
@keyframes spin{to{transform:rotate(360deg)}}
.who .wi{flex:1;min-width:0;display:block}
.who .nm{display:block;font:500 20px/1.05 var(--serif);color:var(--ink)}
.who .rl{display:block;font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-top:4px;line-height:1.5}
.who .fx{display:block;font:italic 400 14px/1.3 var(--serif);color:var(--muted);margin-top:2px}
.who .turn{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:7px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);text-align:center;line-height:1.4}
.who .turn svg{width:17px;height:17px}

.when{padding-top:9px}
.when .lbl{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);padding-bottom:2px}
.when .lbl button{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);text-decoration:underline;text-underline-offset:4px;flex:none}
.trow{display:flex;align-items:center;min-height:46px;border-bottom:1px solid var(--line);position:relative}
.trow .d{width:76px;flex:none;font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);line-height:1.2}
.trow .d b{display:block;font:500 18px/1 var(--serif);letter-spacing:0;text-transform:none;color:var(--ink);margin-top:2px}
.trow .d u{display:block;margin-top:4px}            /* "today" / "tomorrow" clear of the date above (QA, 9 Oct) */
.trow .ts{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:2px;flex-wrap:wrap}
/* a time is a 44px target, the size a fingertip needs (design-bar check, 9 Oct: was 38px); the time and its am / pm
   centred in it, with or without the small line */
.t{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:54px;height:44px;padding:0 8px;border-radius:22px;
  font:500 19px/1 var(--serif);color:var(--gold);text-align:center;
  font-variant-numeric:lining-nums;transition:background .35s var(--ease),color .35s,box-shadow .35s}
.t:hover{background:rgba(154,122,48,.09)}
.t.on{background:var(--grad);color:var(--on-gold);box-shadow:0 5px 14px rgba(169,131,45,.38)}
.t small{display:block;font:400 8px/1 var(--sans);letter-spacing:.1em;color:inherit;opacity:.8;margin-top:3px}
.t small:empty{display:none}
.t.usual{box-shadow:inset 0 0 0 1px var(--gold-bright)}
.t.usual small{white-space:nowrap}
.t.who-t{height:44px;line-height:30px}
.t.tmore{min-width:44px;font:400 8px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.trow .ap{font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);width:20px;text-align:right}
.none{font:italic 400 15px/1.45 var(--serif);color:var(--muted);padding:12px 0 6px}
.note{font:italic 400 14.5px/1.45 var(--serif);color:var(--ink);padding:2px 0 8px;border-left:2px solid var(--gold-bright);padding-left:10px;margin:2px 0 6px}
.dock .thinking .wait{padding:0 0 8px;font-size:14px}
/* Tell Hera answers faster (14 Oct): Hera's first line in the dock, and her fixed answers (line breaks kept as the server wrote them) */
.tell-line,.tell-more{white-space:pre-line;overflow-wrap:anywhere}
.dock .tellwait{display:flex;align-items:center;gap:10px;padding:2px 0 9px}
.dock .tellwait .say{margin:0;font-size:15.5px;line-height:1.35;flex:1;min-width:0}
.dock .tellwait .wait{padding:0;flex:none}
.tell-src{display:block;margin-top:9px;font:500 8.5px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.tell-src+.say{margin-top:4px}
.tell-more{margin-top:0}
.wait.listen i{background:#B3353B}
.dock.rec .go{animation:recpulse 1.4s ease-in-out infinite}
@keyframes recpulse{0%,100%{box-shadow:0 0 0 0 rgba(179,53,59,.45)}50%{box-shadow:0 0 0 9px rgba(179,53,59,0)}}
@media (prefers-reduced-motion:reduce){.dock.rec .go{animation:none}}
.dock input:disabled{opacity:.55}

.total{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:13px 0 4px}
.total .l{font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);line-height:1.8}
.total .l span{display:block;font:italic 400 14px/1.3 var(--serif);letter-spacing:0;text-transform:none;color:var(--muted)}
.total .v{font:500 31px/1 var(--serif);color:var(--gold);text-align:right;font-variant-numeric:lining-nums}
/* #109: a price confirmed at the salon is words, not an amount: smaller, and it wraps beside the service (375px phones) */
.total .v.at{font-size:20px;line-height:1.25;max-width:62%;overflow-wrap:anywhere;min-width:0}
.total .l{min-width:0}
.row .p.at,.ex .p.at{font:italic 400 14px/1.3 var(--serif);white-space:normal;text-align:right;max-width:9em}
.honest{margin-top:8px;padding:9px 0 2px;border-top:1px dashed var(--line-2);font:italic 400 14px/1.4 var(--serif);color:var(--ink-soft)}
.honest b{font:400 8px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:3px}
.ext1 .acts{flex-direction:column;font-style:normal}
/* plan 4.5a: every stylist's portrait in "Choose your stylist"; tap it to turn the Hall of Masters card */
.srow{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}
.srow .row{flex:1;min-width:0;border-bottom:0}
.pic{flex:none;width:46px;height:46px;border-radius:50%;overflow:hidden;padding:0;border:1px solid var(--gold);background:var(--page-2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;font:400 18px var(--serif);color:var(--gold)}
.pic img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.honest small{display:block;font:400 11px/1.4 var(--sans);font-style:normal;color:var(--muted);margin-top:4px}
.honest .inl{background:none;border:0;padding:0;font:inherit;color:var(--gold);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* "Help your specialist prepare" (owner, 6 Oct): optional, after booking */
.brief{margin-top:14px;padding:14px 0 4px;border-top:1px solid var(--line)}
.brief .sub{margin:2px 0 6px;font:italic 400 13px var(--serif);color:var(--muted)}
.brief .q{display:block;margin:12px 0 0;font:400 13.5px/1.4 var(--sans);color:var(--ink-soft)}
.brief .lchips{margin:2px 0 0;padding:8px 0 2px;flex-wrap:wrap;overflow:visible}
.brief input[type=date],.brief textarea{display:block;width:100%;max-width:100%;box-sizing:border-box;margin-top:6px;padding:10px 12px;
  border:1px solid var(--line-2);border-radius:4px;background:transparent;color:var(--ink);font:400 16px/1.4 var(--sans)}
.brief textarea{resize:vertical;min-height:84px}
.brief label small{display:block;margin-top:4px;font-size:11px;color:var(--muted)}
.brief .acts{margin-top:14px}
.brief .thanks{font:italic 400 15px/1.45 var(--serif);color:var(--ink-soft);margin:6px 0}
.lviews{margin-top:10px}
.lvrow{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.lvrow figure{margin:0;flex:0 0 46%;max-width:46%}
.lvrow img{width:100%;height:auto;border-radius:4px;display:block}
.lvrow figcaption{font:400 9px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.luse{margin-top:10px}
.luse .lchips{justify-content:flex-start}
.day{font:italic 400 14px/1.45 var(--serif);color:var(--muted);padding:8px 0 2px}
.day b{font-weight:500;color:var(--ink-soft)}

/* complete your look: at most two, "No thanks" is final */
.extras{margin:12px 16px 0;padding:2px 16px;background:rgba(250,246,236,.55);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.extras .h{font-size:8px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);padding:10px 0 0}
.ex{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.ex:last-child{border-bottom:0}
.ex .n{flex:1;min-width:0;font-size:14px;line-height:1.3;color:var(--ink-soft)}
.ex .n small{display:block;font:italic 400 13.5px/1.3 var(--serif);color:var(--muted);margin-top:2px}
.ex .n .tm{display:block;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:4px}
.ex .p{font:500 17px/1 var(--serif);color:var(--gold);white-space:nowrap}
.ex .add{position:relative;min-height:0;flex:none;height:32px;padding:0 13px;border:1px solid var(--line-2);border-radius:16px;font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.ex .add.on{background:var(--grad);color:var(--on-gold);border-color:transparent}
.nothanks{display:block;margin:0 0 10px auto;font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);text-decoration:underline;text-underline-offset:4px}

/* her details, only when Hera doesn't know her yet */
.fields{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.fields .h{font:italic 400 17px/1.3 var(--serif);color:var(--ink-soft)}
.fields .h small{display:block;font:400 8px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-top:4px}
.fld{display:flex;align-items:center;min-height:48px;margin-top:8px;padding:0 0 0 14px;background:#fff;border:1px solid var(--line-2)}
.fld span{font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);width:76px;flex:none}
.fld input{flex:1;min-width:0;height:46px;border:0;background:transparent;font-size:16px;padding:0 12px 0 0;outline:none}
.fld:focus-within{border-color:var(--gold)}
.fld.bad{border-color:var(--err)}
.opt{display:flex;gap:10px;align-items:flex-start;margin-top:11px;font-size:13.5px;line-height:1.45;color:var(--ink-soft);cursor:pointer}
.opt input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:#A9832D}
.pol{font-size:12px;line-height:1.5;color:var(--muted);margin-top:9px}
/* #118: the salon's booking questions before Book, and her answers on the confirmation */
.qs{padding-bottom:12px}
.qs .qa{margin-top:12px}
.qs .qt{font-size:14.5px;line-height:1.45;color:var(--ink-soft)}
.qs .qt small{display:block;font:400 8px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-top:4px}
.qs .qa .fld{margin-top:6px}
.qs .ynb{display:flex;gap:8px;margin-top:6px}
.qs .ynb button{flex:1;min-height:46px;text-align:center;background:#fff;border:1px solid var(--line-2);font:400 14px var(--sans);color:var(--ink-soft);cursor:pointer}
.qs .ynb button.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);color:var(--ink)}
.qs .qa.bad .fld,.qs .qa.bad .ynb button{border-color:var(--err)}
.qa-done p{margin:5px 0 0}
.qa-done b.ans{display:inline;margin:0;font:600 14px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink)}
.pol button{color:var(--gold);text-decoration:underline;text-underline-offset:3px;font-size:inherit}
.promise{text-align:center;font:italic 400 13.5px/1.4 var(--serif);color:var(--muted);margin-top:10px}
.err{color:var(--err);font-size:13.5px;line-height:1.45;margin-top:10px}

/* new visitor */
.groups{margin-top:12px;padding-top:11px;border-top:1px solid var(--line);text-align:center}
.groups .gl{font:italic 400 16px/1.9 var(--serif);color:var(--ink-soft);margin-top:4px}
.groups .gl button{font:inherit;color:inherit;padding:0 1px;text-decoration:underline;text-decoration-color:rgba(154,122,48,.35);text-underline-offset:4px}
.groups .gl i{font-style:normal;color:var(--gold-bright);font-size:6px;vertical-align:2px;margin:0 7px}
.links{display:flex;flex-direction:column;align-items:center;gap:11px;padding:18px 24px 8px}
.links button,.links a{font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(154,122,48,.4);text-align:center}
.links .soft{color:var(--faint)}

/* the dock: it listens, and becomes Book the moment she taps a time */
/* solid from just above "Tap only" down (design-bar check, 9 Oct: the menu's words showed through and ran into the
   switch); only the 18px above it fades into the page */
.dock{position:sticky;bottom:env(safe-area-inset-bottom,0px);margin-top:auto;padding:18px 16px 16px;z-index:5;background:linear-gradient(to top,var(--parchment) calc(100% - 18px),rgba(239,231,212,0))}
.vowline{display:none;text-align:center;font-size:7.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.vowline i{font-style:normal;color:var(--gold-bright);margin:0 6px;font-size:6px;vertical-align:1px}
.dbar{display:flex;gap:8px;align-items:center}
.cbar{flex:1;display:flex;align-items:center;gap:4px;height:52px;padding:0 6px 0 18px;background:var(--page);border:1px solid var(--line-2);border-radius:26px;box-shadow:0 8px 22px rgba(92,66,24,.14);min-width:0}
.cbar input{flex:1;min-width:0;height:50px;border:0;background:transparent;outline:none;font:italic 400 17px var(--serif);color:var(--ink)}
.cbar input::placeholder{color:var(--faint)}
.cbar:focus-within{border-color:var(--gold)}
.ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--gold);flex:none}
.ic svg{width:18px;height:18px}
.ic.go{background:var(--grad);color:var(--on-gold);box-shadow:0 4px 10px rgba(169,131,45,.35)}
.ic.lab{width:44px;height:44px;grid-template-rows:auto auto;align-content:center;gap:1px}
.ic.lab svg{width:16px;height:16px}
.ic.lab>span:last-child{font:500 8.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase}
/* a long word ("SPRECHEN", "BERCAKAP") set smaller to stay inside its round button (living.js fitNow; QA, 9 Oct) */
.ic.lab>span.lw{white-space:nowrap}
.ic.lab>span.lw.fit{font-size:7.5px;letter-spacing:0}
.ic.lab>span.lw.fit2{font-size:6.5px;letter-spacing:0}
.mini{display:none;width:52px;height:52px;border:1px solid var(--line-2);background:var(--page);box-shadow:0 8px 22px rgba(92,66,24,.14)}
.bookbar{display:none;flex:1;min-width:0;height:52px;border-radius:26px;background:var(--grad);color:var(--on-gold);font-size:10.5px;font-weight:400;letter-spacing:.15em;text-transform:uppercase;text-align:center;
  box-shadow:0 10px 22px rgba(169,131,45,.34);position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 12px}
.bookbar::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,250,235,.55),transparent);animation:sheen 3.6s var(--ease) infinite}
.bookbar:disabled{opacity:.7}
@keyframes sheen{0%,55%{left:-40%}100%{left:130%}}
.dock.ready{padding-top:26px;background:linear-gradient(to top,var(--parchment) 80%,rgba(239,231,212,0))}
.dock.ready .vowline{display:block}
.dock.ready .cbar{display:none}
.dock.ready .mini{display:grid}
.dock.ready .bookbar{display:block}
/* the book bar: what she does, then her day and time - on one line when they fit, else on two (living.js fitNow; QA,
   9 Oct: the time was cut off in five languages) */
.bookbar span{display:inline-block;white-space:nowrap;vertical-align:middle}
.bookbar .dot{display:inline}
.dock.ready .bookbar.two{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:auto;min-height:52px;padding:7px 12px;line-height:1.25}
.bookbar.two .dot{display:none}
.bookbar.two span{white-space:normal;max-width:100%}
/* Tap only (plan 4.1): no text box and no microphone; Photo and every box to tap stay */
.tapsw{display:flex;align-items:center;gap:8px;width:max-content;margin:0 6px 4px auto;min-height:44px;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.tapsw .knob{position:relative;width:28px;height:16px;border-radius:8px;background:var(--page);border:1px solid var(--line-2);flex:none;transition:background .3s var(--ease)}
.tapsw .knob::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:var(--gold-bright);transition:transform .3s var(--ease)}
.tapsw[aria-checked="true"]{color:var(--gold)}
.tapsw[aria-checked="true"] .knob{background:var(--grad);border-color:transparent}
.tapsw[aria-checked="true"] .knob::after{transform:translateX(12px);background:#FBF6EA}
.dock.ready .tapsw{display:none}
.dock.taponly .cbar input,.dock.taponly .cbar .go,.dock.taponly .mini{display:none}
.dock.taponly .dbar{justify-content:center}
.dock.taponly .cbar{flex:none;padding:0 4px}

/* the confirmation: a prep card */
.done h2{font:300 32px/1.05 var(--serif);color:var(--ink);text-align:center;margin-top:8px}
.done h2 em{font-style:italic;color:var(--gold)}
.when-big{text-align:center;margin-top:8px}
.when-big b{display:block;font:500 20px/1.2 var(--serif);color:var(--ink)}
.when-big span{display:block;font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-top:5px}
.acts{display:flex;gap:8px;margin-top:12px}
.acts a,.acts button{flex:1;display:grid;place-items:center;height:46px;font-size:9px;letter-spacing:.22em;text-transform:uppercase;text-align:center;text-decoration:none}
.acts .m{background:var(--grad);color:var(--on-gold);box-shadow:0 8px 18px rgba(169,131,45,.28)}
.acts .s{border:1px solid var(--line-2);color:var(--gold)}
/* "Booked with us before?" - her first name and mobile find her usual (plan 4.6b, 4.7) */
.known{display:block;padding:4px 2px 2px}
.known.inline{margin:6px 16px 4px;padding:14px 14px 12px;border:1px solid var(--line-2);background:rgba(255,253,247,.55)}
.known .h{font:italic 400 18px/1.3 var(--serif);color:var(--ink)}
.known small{display:block;font-size:12px;line-height:1.45;color:var(--muted);margin-top:3px}
.known .m{display:grid;place-items:center;width:100%;height:46px;margin-top:10px;background:var(--grad);color:var(--on-gold);
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;box-shadow:0 8px 18px rgba(169,131,45,.28)}
.known .m:disabled{opacity:.6}
.inspo{margin:14px 0 4px;padding:14px 14px 10px;border:1px solid var(--line-2);background:rgba(255,253,247,.55)}
.inspo .h{font:400 19px/1.2 var(--serif);color:var(--ink)}
.inspo p{font-size:13px;line-height:1.45;color:var(--ink-soft);margin:6px 0 0}
.inspo .st{font:italic 400 14px/1.4 var(--serif);color:var(--gold);min-height:1em}
.inspo .thumbs{display:flex;gap:8px;margin-top:10px}
.inspo .thumbs img{width:64px;height:64px;object-fit:cover;border:1px solid var(--line-2)}
.inspo .same{padding-bottom:12px;margin-bottom:2px;border-bottom:1px solid var(--line-2)}
.inspo .thumbs{align-items:flex-start}
.inspo .pv{display:flex;flex-direction:column;align-items:center;gap:4px;width:64px}
.inspo .pv .ai{font:500 7px/1.25 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);text-align:center}
/* one row per service with looks (owner, 23 Oct 2026): "Haircut looks  Choose a look" / "Balayage looks  Choose a look" */
.inspo .libs{margin-top:10px;border-top:1px solid var(--line)}
.inspo .librow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.inspo .librow .ln{flex:1;min-width:0;font:400 16px/1.3 var(--serif);color:var(--ink)}
.inspo .librow .ln em{font-style:italic;color:var(--gold)}
.inspo .librow button{flex:none;height:36px;padding:0 12px;border:1px solid var(--line-2);color:var(--gold);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;background:none}
.inspo .ph{width:64px;height:64px;display:grid;place-items:center;border:1px solid var(--line-2);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.inspo .soft{display:block;margin:6px auto 0;background:none;border:0;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding:8px}
.acts button:disabled{opacity:.55;cursor:default}

/* the Look Library (plan 4.3b): the range first, hair like hers first; a look made by AI always says so */
.lchips{margin:2px -22px 0;padding:12px 22px 2px}
.lfit{text-align:center;font-size:12.5px;line-height:1.5;color:var(--muted);margin-top:10px}
.lfit>button{color:var(--gold);text-decoration:underline;text-underline-offset:3px;font-size:inherit}
.ltex,.lshades{margin:0 -22px;padding:8px 22px 2px}
.lib [hidden]{display:none}
.trysee{margin-top:14px}
.trysee>button{display:block;width:100%;height:46px;border:1px solid var(--gold);color:var(--gold);font-size:9px;letter-spacing:.22em;text-transform:uppercase;background:rgba(154,122,48,.06)}
.trysee .aino{text-align:center;margin-top:6px}
.tryon h3{margin-bottom:4px}
.trynote{text-align:center;font:italic 400 14px/1.4 var(--serif);color:var(--ink-soft);margin:4px 0 10px}
.tryframe{display:block;width:100%;height:76svh;min-height:480px;border:1px solid var(--line-2);background:var(--page-2)}
.tryleave{margin-top:10px}
.tryleave p{text-align:center;font-size:13px;line-height:1.45;color:var(--ink)}
.lsearch{display:flex;align-items:center;gap:8px;margin-top:14px;padding:0 2px 8px;border-bottom:1px solid var(--line-2);color:var(--gold)}
.lsearch .i svg{width:18px;height:18px;display:block}
.lsearch input{flex:1;min-width:0;border:0;background:none;font:italic 400 16px/1.3 var(--serif);color:var(--ink);padding:6px 0;outline:none}
.lsearch input::placeholder{color:var(--muted)}
.lsearch:focus-within{border-bottom-color:var(--gold)}
.lnote{text-align:center;font:italic 400 13.5px/1.4 var(--serif);color:var(--gold);margin-top:8px}
.lcount{text-align:center;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.lempty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 0}
.lempty .soft{background:none;border:0;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);padding:9px;text-decoration:underline;text-underline-offset:4px}
.lg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px;margin-top:14px}
.lt{position:relative;display:block;min-width:0;text-align:left}
.lt img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;background:var(--page-2);border:1px solid var(--line)}
.lt .lpic img{width:100%}
.lt.chosen img{outline:2px solid var(--gold);outline-offset:-2px}
.lt .lnm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px;
  font:italic 400 14.5px/1.25 var(--serif);color:var(--ink-soft);text-align:center}
/* "AI inspiration" / "Hera result": a small tag in the picture's bottom-right corner, never over the hair (owner, 23 Oct 2026: "the AI
   inspiration word is too big and blocking the images"); it still says, legibly, that the look is AI-made */
.lt .ai,.lim .ai,.lt .hr,.lim .hr{position:absolute;right:4px;bottom:4px;padding:2px 5px 1px;background:rgba(250,246,236,.86);border:1px solid var(--line-2);
  font:500 8px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);pointer-events:none;max-width:60%;white-space:nowrap}
.lt .lpic{position:relative;display:block}
.lt .ok{position:absolute;right:6px;top:6px;padding:4px 6px 3px;background:var(--gold);color:var(--page);
  font:500 7.5px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.lmore{text-align:center;margin-top:10px}
.lmore .soft{background:none;border:0;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);padding:10px;text-decoration:underline;text-underline-offset:4px}
.ld .lim{position:relative}
.ld .lim img{display:block;width:100%;height:auto;max-height:60svh;object-fit:contain;background:var(--page-2);border:1px solid var(--line)}
.ld b{display:block;font:500 22px/1.2 var(--serif);color:var(--ink);margin-top:12px}
.ld p{font-size:13px;line-height:1.5;color:var(--ink-soft);margin-top:5px}
.ld .aino{font:italic 400 14px/1.4 var(--serif);color:var(--muted)}

/* the look she chose in the Virtual Stylist, on her card (plan 8.1) */
.vslook{display:flex;gap:12px;align-items:center;padding:10px 0 4px}
.vslook img{width:58px;height:74px;flex:none;object-fit:cover;border:1px solid var(--line-2);background:var(--page-2)}
.vslook .n{flex:1;min-width:0}
.vslook small{display:block;font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.vslook b{display:block;font:500 17px/1.25 var(--serif);color:var(--ink);margin-top:2px}
.vslook .ai{display:inline-block;margin-top:5px;padding:3px 6px 2px;border:1px solid var(--line-2);font:500 7.5px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
/* ...and her two choices under it: the service, or the free consultation (her look goes with either) */
.vsalt{padding:8px 0 2px}
.vsalt .tabs{padding:0;flex-wrap:nowrap}
.vsalt .tabs button{flex:1 1 0;min-width:0;min-height:40px;line-height:1.35;padding:6px 8px;text-align:center}
.vsalt .why{margin-top:8px;font-size:14px}
.info{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.info:last-child{border-bottom:0}
.info .i{width:26px;height:26px;flex:none;color:var(--gold);margin-top:1px}
.info .n{flex:1;min-width:0;font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
.info .n small{display:block;font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:3px}
.info .n em{font:italic 400 15px var(--serif);color:var(--ink)}

/* sheets: principles, stylists, hair length, a person */
.veil{position:fixed;inset:0;background:rgba(40,28,10,.42);z-index:40;animation:fade .4s var(--ease) both}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;max-width:480px;margin:0 auto;max-height:88svh;overflow:auto;background:var(--page);border-radius:22px 22px 0 0;
  border-top:1px solid var(--gold-bright);box-shadow:0 -14px 40px rgba(40,28,10,.3);padding:12px 22px calc(30px + env(safe-area-inset-bottom,0px));animation:up .55s var(--ease) both;overscroll-behavior:contain}
.grab{width:40px;height:4px;border-radius:2px;background:var(--line-2);margin:0 auto 14px}
.sheet h3{font:300 28px/1.1 var(--serif);text-align:center;color:var(--ink);margin-top:8px}
.sheet h3 em{font-style:italic;color:var(--gold)}
.sheet .close{display:block;margin:18px auto 0;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);text-decoration:underline;text-underline-offset:4px}
.pr{padding:14px 0;border-bottom:1px solid var(--line)}
.pr b{display:block;font:500 19px var(--serif);color:var(--ink)}
.pr small{display:block;font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:3px 0 6px}
.pr p{font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
.sheet .sub{text-align:center;font:italic 400 15px/1.4 var(--serif);color:var(--muted);margin-top:12px}
.sheet .sub b{font-style:normal;font-weight:500;color:var(--gold)}
.keep{display:block;width:100%;height:50px;margin-top:14px;background:var(--grad);color:var(--on-gold);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;text-align:center}
.lengths{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.len{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border:1px solid var(--line-2);background:#fff;text-align:center}
.len.on{border-color:var(--gold);background:rgba(154,122,48,.08)}
.len svg{width:96px;height:134px}
.len b{font:500 17px var(--serif)}
.len span{font-size:11.5px;color:var(--muted);line-height:1.3}
.person{display:block;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink-soft)}
.person b{display:block;font:500 18px var(--serif);color:var(--ink)}
.person span{font-size:13px;color:var(--muted)}
/* each salon's opening hours under its number (#11), and the salon's own words and website (#5) */
.person .hrs{display:block;margin-top:5px;font-size:12.5px;line-height:1.55;color:var(--muted)}
.person .hrs span{display:block;font-size:inherit}
.about{margin-top:16px;font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
.about a{display:inline-block;margin-top:6px;color:var(--gold)}
.person.waconf{margin-top:12px;padding:13px 14px;border:1px solid var(--line-2);border-radius:6px}
.person.waconf b{font-size:16px;color:var(--gold)}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* the Hall of Masters card */
.hom{width:236px;height:336px;margin:14px auto 0;perspective:1200px;cursor:pointer;display:block}
.hom-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.7,.05,.2,1)}
.hom.flip .hom-in{transform:rotateY(180deg)}
.hom-foil{position:absolute;inset:-2px;border-radius:14px;overflow:hidden}
.hom-foil::before{content:"";position:absolute;inset:-60%;background:conic-gradient(from 0deg,#6e5423,#f0ddb0,#c8a96b,#fff6e0,#9a7a30,#e2c99a,#6e5423);animation:spin 7s linear infinite}
.hom-face{position:absolute;inset:0;border-radius:12px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#1c1814}
.hom-front img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.hom-front::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,4,2,.95) 0%,rgba(6,4,2,.35) 46%,rgba(6,4,2,.08) 72%,rgba(6,4,2,.35) 100%)}
.hom-fb{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px;text-align:center}
.hom-nm{font:400 23px/1.1 var(--serif);color:#faf7f3}
.hom-rl{font-size:8px;letter-spacing:.15em;text-transform:uppercase;color:#e2c99a;margin-top:6px;line-height:1.5}
.hom-yr{font-size:8px;letter-spacing:.13em;text-transform:uppercase;color:rgba(200,196,188,.7);margin-top:4px}
.hom-cue{margin-top:10px;display:inline-flex;align-items:center;gap:7px;font-size:7.5px;letter-spacing:.2em;text-transform:uppercase;color:#c8a96b}
.hom-cue i{width:4px;height:4px;background:#c8a96b;transform:rotate(45deg)}
.hom-back{transform:rotateY(180deg);background:radial-gradient(ellipse at 50% 0%,#211a10,#0d0a06 66%);padding:22px 18px;display:flex;flex-direction:column;overflow:auto}
.hom-back::before{content:"";position:absolute;inset:8px;border:1px solid rgba(200,169,107,.3);border-radius:8px;pointer-events:none}
.hom-back .hom-nm{text-align:center;font-size:20px}
.hom-back .hom-rl{text-align:center}
.hom-sig{font:italic 400 14px/1.4 var(--serif);color:#e8dcc6;text-align:center;margin:12px 0 8px}
.hom-cr{font-size:10.5px;line-height:1.5;color:rgba(215,209,198,.9);padding:5px 0;border-top:1px solid rgba(200,169,107,.16)}
.hom-cr b{display:block;font-weight:400;font-size:7.5px;letter-spacing:.2em;text-transform:uppercase;color:#c8a96b}

/* the Signature Service Menu, when she prefers to browse */
.menu-hd{padding:20px 24px 0}
.crest{width:42px;height:42px;color:var(--gold-bright)}
.menu-hd .loc{font-size:8.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-top:12px}
.menu-hd h1{font:300 44px/1 var(--serif);color:var(--ink);margin-top:14px}
.menu-hd h1 em{display:block;font-style:italic;color:#B8964A}
.menu-hd .sub{font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin-top:12px}
.menu-hd.slim{padding-top:10px}                     /* inside a group: the heading smaller, the services higher up */
.menu-hd.slim h1{font-size:30px;margin-top:6px}
.menu-hd.slim h1 em{display:inline;margin-left:.25em}
/* whose list and prices she is reading (design-bar check, 9 Oct): her salon, one tap to change it */
.menu-hd .msalon{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:12px;padding:0 16px;border:1px solid var(--line-2);border-radius:22px;
  background:rgba(250,246,236,.6);font:500 9px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);text-align:left}
.menu-hd .msalon span{display:flex}
.menu-hd .msalon svg{width:8px;height:8px}
.tabs{display:flex;flex-wrap:wrap;gap:6px;padding:14px 20px 2px}   /* every group visible, phone or computer (owner, 7 Oct) */
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;min-height:40px;padding:4px 12px;border:1px solid var(--line-2);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tabs button.on{border-color:var(--gold);color:var(--gold);background:rgba(154,122,48,.1)}
/* "Book with a stylist": every stylist equal, A to Z (owner, 1 Oct), and each stylist's own page */
.masters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;margin-top:14px}
.mt{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;text-align:center;padding:2px 0 6px}
.mt .ph{width:100%;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:#1c1814;border:1px solid var(--gold-bright);display:grid;place-items:center;margin-bottom:6px}
.mt .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;display:block}
.mt .ph span{font:400 34px var(--serif);color:#e2c99a}
.mt b{font:500 19px/1.15 var(--serif);color:var(--ink)}
.mt small{font-size:7.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);line-height:1.5}
.mhead{padding-bottom:4px}
.mhead .hom{margin-top:16px}
.srch{display:flex;margin:10px 20px 0;border-bottom:1px solid var(--line-2)}
.srch input{flex:1;min-width:0;height:44px;border:0;background:transparent;outline:none;font-size:16px;padding:0 4px}
.srch input[type=search]{-webkit-appearance:none;appearance:none}
.srch input::-webkit-search-cancel-button,.srch input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}   /* the phone's own blue x: Hera has her own */
.srch .clr{flex:none;width:44px;height:44px;display:grid;place-items:center;font:300 28px/1 var(--serif);color:var(--gold)}
.srch .clr[hidden]{display:none}
.hint{text-align:center;font:italic 400 14.5px/1.45 var(--serif);color:var(--muted);padding:12px 10px 4px}
.info .inl{background:none;border:0;padding:0;font:inherit;color:var(--gold);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hint .inl{background:none;border:0;padding:0;font:inherit;color:var(--gold);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* waiting, briefly */
.wait{display:flex;align-items:center;gap:10px;justify-content:center;padding:18px 0;font:italic 400 15px var(--serif);color:var(--muted)}
.wait i{width:6px;height:6px;border-radius:50%;background:var(--gold-bright);animation:pulse 1.2s var(--ease) infinite}
.wait i:nth-child(2){animation-delay:.15s}.wait i:nth-child(3){animation-delay:.3s}
@keyframes pulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:none}}

.toast{position:fixed;left:50%;transform:translateX(-50%);width:min(440px,calc(100% - 48px));bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:60;padding:12px 16px;background:#2C2417;color:#F4E9CF;
  font-size:13px;line-height:1.45;text-align:center;border:1px solid rgba(200,169,107,.5);animation:fade .4s var(--ease) both}

/* motion: Hera writes the visit onto the page */
.play .ink{animation:ink .75s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes ink{from{opacity:0;transform:translateY(8px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
.play .row.ink::after,.play .who.ink::after,.play .trow.ink::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,rgba(233,210,156,0) 35%,rgba(233,210,156,.55) 50%,rgba(233,210,156,0) 65%,transparent 100%);
  background-size:250% 100%;background-position:120% 0;animation:shim 1.3s var(--ease) both;animation-delay:calc(var(--d,0ms) + 150ms)}
@keyframes shim{from{background-position:120% 0}to{background-position:-40% 0}}
.glow{animation:glow 1.9s var(--ease) both}
@keyframes glow{0%{background-color:rgba(233,210,156,0)}30%{background-color:rgba(233,210,156,.4)}100%{background-color:rgba(233,210,156,0)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.ext-intro{margin:2px 0 10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.ext-intro .hint{padding:6px 10px 2px}

/* Back (owner, 7 Oct): on every screen after the first */
.top .back{display:flex;align-items:center;gap:5px;min-height:44px;margin:-12px 14px -12px -8px;padding:0 8px;font:500 9px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.top .back span{display:flex}
.top .back svg{width:13px;height:13px}
.top .back + .brand{margin-right:auto}
/* "Not sure which to choose?" at the bottom of a part of the menu: the Look Library */
.explore{margin:18px 0 4px;padding:4px 8px 6px;text-align:center}
.explore .ex-h{font:400 22px/1.2 var(--serif);color:var(--ink);margin-top:8px}
.explore .ex-h em{font-style:italic;color:var(--gold)}
.explore .ex-t{font:italic 400 15px/1.45 var(--serif);color:var(--muted);margin:6px auto 0;max-width:30em}
.explore .ex-b{display:inline-grid;place-items:center;height:46px;padding:0 26px;margin-top:14px;background:var(--grad);color:var(--on-gold);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;box-shadow:0 8px 18px rgba(169,131,45,.28)}
.ld .lmake{font:italic 400 15px/1.4 var(--serif);color:var(--gold)}

/* "Help me choose", the cost guide and the consultation's scope (owner, 7 Oct) */
.xhelp{text-align:center;margin-top:10px}
.xhelp .hint{padding-top:6px}
.ext-intro .ex-b,.xhelp .ex-b{display:inline-grid;place-items:center;height:46px;padding:0 26px;background:var(--grad);color:var(--on-gold);
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;box-shadow:0 8px 18px rgba(169,131,45,.28)}
.xch .sub{font:italic 400 14px/1.45 var(--serif);color:var(--muted);margin:4px 0 2px}
.xch .lchips{flex-wrap:wrap;padding-top:10px;padding-bottom:4px}
.xms{display:grid;gap:10px;margin-top:10px}
.xm{border:1px solid var(--line-2);padding:12px 14px;background:rgba(255,255,255,.4)}
.xm.best{border-color:var(--gold);box-shadow:0 6px 16px rgba(169,131,45,.14)}
.xm .tag{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.xm b{display:block;font:500 20px/1.2 var(--serif);color:var(--ink)}
.xm .plus{font:italic 400 14.5px/1.4 var(--serif);color:var(--ink-soft);margin-top:3px}
.xm .ok,.xm .tr{font-size:13px;line-height:1.45;margin-top:4px}
.xm .ok{color:var(--ink-soft)}
.xm .ok::before{content:"\2713  ";color:var(--gold)}
.xm .tr,.xch .tr{color:var(--muted)}
.xm .glance{font-size:12px;color:var(--faint);margin-top:8px}
.xm .acts button.on{border-color:var(--gold);background:rgba(154,122,48,.1)}
.xblend{font:italic 400 14.5px/1.45 var(--serif);color:var(--muted);margin-top:10px}
.xtl{margin-top:10px}
.xl{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.xl span{min-width:0;font-size:14px;color:var(--ink)}
.xl small{display:block;font-size:11.5px;color:var(--faint);margin-top:2px}
.xl b{flex:none;font:500 17px var(--serif);color:var(--gold)}
.xl.soft span,.xl.soft b{color:var(--muted)}
.xtot{font:500 18px/1.3 var(--serif);color:var(--ink);margin-top:12px}
.xch .aino{font:italic 400 13.5px/1.45 var(--serif);color:var(--muted);margin-top:10px}
.xfoot{margin-top:16px}
.scope{font:italic 400 14.5px/1.45 var(--serif);color:var(--ink-soft);border-left:2px solid var(--gold-bright);padding:4px 0 4px 10px;margin:2px 0 12px}
.brl{font-size:12.5px;line-height:1.5;color:var(--muted);margin:0 0 10px}
.brief .lims{display:grid;grid-template-columns:1fr;gap:10px}
.brief .lims[hidden],.xch [hidden]{display:none}
.brief input[type=number],.brief input[type=text]{display:block;width:100%;max-width:100%;box-sizing:border-box;margin-top:6px;padding:10px 12px;
  border:1px solid var(--line-2);border-radius:4px;background:transparent;color:var(--ink);font:400 16px/1.4 var(--sans)}
.brief .assess{font:italic 400 14px/1.45 var(--serif);color:var(--muted);margin-top:14px}
/* Extensions: the right appointment first, her guide and her brief (ChatGPT brief 2-7, owner 7 Oct) */
.xq{font:400 21px/1.25 var(--serif);color:var(--ink);text-align:center;margin:12px 0 2px}
.xroutes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.xroutes .xr{min-height:48px;padding:8px 10px;border:1px solid var(--line-2);background:rgba(255,255,255,.45);font:400 14px/1.3 var(--sans);
  color:var(--ink-soft);text-align:center}
.xroutes .xr:first-child{grid-column:1/-1;background:var(--grad);color:var(--on-gold);border-color:transparent;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;box-shadow:0 8px 18px rgba(169,131,45,.22)}
.xlinks{padding-top:4px}
.xref{margin:4px 0 8px;padding:9px 12px;border:1px solid var(--line-2);background:rgba(255,253,247,.6);font-size:13px;line-height:1.5;
  color:var(--ink-soft);text-align:center}
.xref b{font-weight:500;color:var(--gold)}
.xref .inl{background:none;border:0;padding:0;font:inherit;color:var(--gold);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.xdone{text-align:left;margin:4px 0 14px}
.xdone p + p{margin-top:4px}
.xrn{font:500 18px var(--serif);letter-spacing:.04em}
.xgh{font-size:23px!important;line-height:1.2!important}
.xg .sub{text-align:left}
.xcol{flex-direction:column}
.xcol button,.xcol a{flex:none;width:100%}
.xed.brief{margin-top:4px;padding-top:0;border-top:0}
.xgoal [hidden],.xbudget [hidden]{display:none}
.xheard{font-size:12.5px;line-height:1.5;color:var(--muted);margin-top:10px}
.xsaid{font:italic 400 14px/1.4 var(--serif);color:var(--ink)}
.xnote{display:block;font-size:11.5px;line-height:1.45;color:var(--muted);margin-top:6px}
.xbudget .lims{display:grid;grid-template-columns:1fr;gap:10px}
/* her spending limits: what each box is, above it, and what she typed, below it (QA, 9 Oct) */
.lims .lim{display:block;font-size:8.5px;line-height:1.5;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.lims .lim .echo{display:block;margin-top:4px;font:italic 400 13.5px/1.35 var(--serif);letter-spacing:0;text-transform:none;color:var(--ink-soft)}
.lims .lim .echo:empty{display:none}
.xpg{margin-top:12px}
.xpg-h{font-size:8.5px;line-height:1.6;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);text-align:center;margin-bottom:6px}
.xpt{border:1px solid var(--line-2);background:rgba(255,255,255,.4);padding:10px 12px 4px;margin-top:8px}
.xpt-n{display:block;font:500 19px/1.2 var(--serif);color:var(--ink)}
.xpt .xl:last-child{border-bottom:0}
.xl small.xst,.xst{color:var(--gold);letter-spacing:.03em}
.xinc{font:italic 400 13.5px/1.45 var(--serif);color:var(--ink-soft);margin:6px 0 2px}
.xinc small{display:block;font:400 10.5px var(--sans);color:var(--faint);margin-top:2px}
.xlim{font-size:12.5px;line-height:1.45;color:var(--ink-soft);padding:6px 0 8px}
.xask2{font:italic 400 14px/1.45 var(--serif);color:var(--muted);margin-top:12px}
.xpg .aino,.xg .aino{font:italic 400 13.5px/1.45 var(--serif);color:var(--muted);margin-top:8px}
.xrec{font-size:13px;line-height:1.45;color:var(--ink-soft);margin-top:8px}
.xsum{margin:12px 0 4px;padding:10px 12px;border:1px solid var(--line-2);background:rgba(255,253,247,.55);text-align:left}
.xs-h{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.xs-p{padding:8px 0;border-bottom:1px solid var(--line)}
.xs-p.xs-a{border-bottom:0}
.xs-p small{display:flex;justify-content:space-between;gap:8px;font-size:8.5px;line-height:1.5;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.xs-p small i{font-style:normal;color:var(--gold);white-space:nowrap}
.xs-p p{font-size:14px;line-height:1.45;color:var(--ink);margin-top:3px}
.xs-p p.mine{font:italic 400 15.5px/1.4 var(--serif)}
.xs-a p{color:var(--muted)}
.xs-a small i{color:var(--faint)}
.xs-p textarea{display:block;width:100%;max-width:100%;margin-top:6px;padding:8px 10px;border:1px solid var(--line-2);border-radius:4px;
  background:transparent;color:var(--ink);font:400 16px/1.4 var(--sans);resize:vertical}
.xs-c{margin-top:6px;background:none;border:0;padding:4px 0;font:italic 400 15px var(--serif);color:var(--gold);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer}
.xask{margin-top:12px;padding:10px 12px;border:1px dashed var(--line-2)}
.xask b{display:block;font-size:8.5px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.xask p{font-size:13px;line-height:1.5;color:var(--ink-soft);margin-top:4px}
.xmo{font-style:normal;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-right:4px}
.xcb{margin-bottom:12px}
.xfacts{margin:2px 0 10px}
.xfacts p{font-size:13.5px;line-height:1.5;color:var(--ink-soft);padding:3px 0}
.xfacts b{font-weight:500;color:var(--gold)}
.xaddr{display:block;font-size:12px;color:var(--muted)}
.xready{display:block;margin:10px 0 4px;font-size:13.5px;line-height:1.4;color:var(--ink-soft)}
.xready input{display:block;width:100%;max-width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--line-2);border-radius:4px;
  background:transparent;color:var(--ink);font:400 16px/1.4 var(--sans)}
.xready small{display:block;margin-top:4px;font-size:11px;color:var(--muted)}

/* Her language (owner, 7 Oct) */
.i18n-wait .app,.i18n-wait #layer{visibility:hidden}
.top .r button.lang{color:var(--ink-soft)}
.n > .en{display:block;margin-top:2px;font:400 11px/1.3 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--faint)}
.vpage .n > .en{display:none}   /* E2E audit, 17 Oct (finding 10): her visit to confirm shows each name once, in her language */
:lang(zh) .say,:lang(ja) .say,:lang(ko) .say,:lang(ta) .say{font-style:normal}
/* Hindi, Chinese, Japanese and Korean (design-bar check, 9 Oct): their letters are never spaced apart (the small capital
   labels pulled Devanagari words to pieces) and never slanted (a browser's fake italic); the HERA mark keeps its own.
   Tamil the same (owner, 9 Oct): spacing pulls its vowel signs away from their letters, and Tamil has no italic */
:lang(hi),:lang(zh),:lang(ja),:lang(ko),:lang(ta){letter-spacing:0!important;font-style:normal!important}
/* Tamil words are long (முன்பதிவு செய்யுங்கள்): a button or label wraps at its spaces onto a second line rather than
   run out of its box at phone width (a word is split only when it alone is wider than the box), and the marks above and
   below a Tamil line are never clipped by a tight display line height */
:lang(ta) button,:lang(ta) label,:lang(ta) h1,:lang(ta) h2,:lang(ta) h3{overflow-wrap:break-word}
:lang(ta) h1,:lang(ta) h2,:lang(ta) h3{line-height:1.3}
/* the small words beside a price ("குறைந்தது", "ஒரு இழைக்கு") sit on their own line above / below it, so the service's
   Tamil name keeps the room it needs and is never split inside a word */
:lang(ta) .row .p{text-align:right}
:lang(ta) .row .p small{display:block;margin:0 0 3px}
/* a stylist's card and the menu's group names: a Tamil word set a little smaller fits its column whole, with room for
   its marks above and below */
:lang(ta) .who .nm{font-size:17px;line-height:1.3}
:lang(ta) .row.grp .n b,:lang(ta) .row.sub .n b{line-height:1.3}
:lang(ta) .row.sub .p.fp{font-size:15px;max-width:5.2em}   /* a long Tamil title keeps its width beside the price */
:lang(ta) .row.sub .p.fp small{font-size:11px;line-height:1.25}
:lang(ta) .row.sub .n b{font-size:17px}
/* #109: "S$185.30 + உங்கள் வருகையின்போது சொல்லப்படும் விலை" beside the total stays inside the card */
:lang(ta) .total .v.at,:lang(hi) .total .v.at,:lang(ru) .total .v.at,:lang(de) .total .v.at{font-size:16px;line-height:1.35}
:lang(ta) .row .p.at,:lang(ta) .ex .p.at{font-size:12.5px}

/* "Your hair now" (plan 4.3c) */
.inspo .hairnow{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.inspo .hairnow .h2{font:500 17px/1.3 var(--serif);color:var(--ink)}
.inspo .hairnow p{font-size:13px;line-height:1.5;color:var(--ink-soft);margin-top:4px}

/* The Photo button (owner, 9 Oct): her photo, "Which look is this?" and three full head services */
.plook img{display:block;width:100%;max-height:38svh;object-fit:contain;margin:14px 0 2px;border:1px solid var(--line-2);background:var(--page-2)}
.plook .pl{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.plook .pl button{display:grid;place-items:center;min-height:56px;padding:8px 16px;background:var(--grad);color:var(--on-gold);font:500 18px/1.25 var(--serif);text-align:center;box-shadow:0 8px 18px rgba(169,131,45,.22)}
.plook .sub{margin-top:14px}

/* "Tell me if an earlier time comes up" (parity #105): the line under the times, and its sheet */
.when .nosuit{display:block;margin:10px auto 0;min-height:44px;padding:0 8px;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);text-decoration:underline;text-underline-offset:4px}
.wish .wsum{margin:14px 0 2px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.wish .wsum b{display:block;font:500 17px/1.3 var(--serif);color:var(--ink)}
.wish .wsum span{display:block;margin-top:3px;font-size:12px;color:var(--muted)}
.wish .q{margin:14px 0 0;font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.wish .lchips{margin:0;padding:8px 0 2px;flex-wrap:wrap;overflow:visible}
.wish .tabs button{min-height:44px;min-width:44px}
.wish .fld:first-of-type{margin-top:16px}
.wish .acts{margin-top:16px}
.wish .acts button:disabled{opacity:.6}
/* her package pays for it at the till (parity #181) */
.row .n .pk{display:block;margin-top:3px;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.total .l span.pk{font:400 12px/1.4 var(--sans);color:var(--gold);margin-top:2px}
/* the Hall of Masters: a stylist booked through the salon (parity #19) */
.mt small.via{color:var(--muted);letter-spacing:.12em}
/* in Instagram's or Facebook's own browser: Hera looks for her usual by itself, with a Cancel (plan 1.4) */
.known .auto{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px;font:italic 400 14px/1.3 var(--serif);color:var(--ink-soft)}
.known .auto[hidden]{display:none}
.known .auto .inl{min-height:44px;padding:0 6px;font:400 9px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);text-decoration:underline;text-underline-offset:4px}
/* her mobile with its country code (owner, 10 Oct; phone.js): "+65" in front of the number, a short list to search */
.tel .cc{flex:none;display:flex;align-items:center;gap:6px;height:46px;margin-right:10px;padding:0 10px 0 0;border-right:1px solid var(--line-2);
  font:400 16px/1 var(--sans);color:var(--ink);white-space:nowrap;font-variant-numeric:lining-nums}
.tel .cc::after{content:"";width:5px;height:5px;margin-top:-3px;border:solid var(--gold);border-width:0 1.3px 1.3px 0;transform:rotate(45deg)}
.tel .cc[aria-expanded="true"]::after{margin-top:3px;transform:rotate(225deg)}
.wish .fld + .tel > .fld{margin-top:8px}
.ccl{border:1px solid var(--line-2);border-top:0;background:#fff;padding:6px 10px 4px}
.ccl[hidden]{display:none}
.ccl input{width:100%;height:42px;border:0;border-bottom:1px solid var(--line-2);background:transparent;color:var(--ink);padding:0 2px;outline:none}
.ccl input:focus{border-bottom-color:var(--gold)}
.cco{max-height:236px;overflow-y:auto;overscroll-behavior:contain;margin-top:2px}
.cco button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:0 4px;
  border-bottom:1px solid var(--line);font:400 15px/1.3 var(--sans);color:var(--ink-soft);text-align:left}
.cco button b{flex:none;font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}
.cco button.on,.cco button.on b{color:var(--gold);font-weight:500}
.cco button.sep{border-top:1px solid var(--gold-bright)}
.ccn{padding:10px 4px;font:italic 400 14px/1.4 var(--serif);color:var(--muted)}

/* "Talk to Hera" (owner, 10 Oct 2026; bottom-bar button 14 Oct; live call and ONE button only, 16 Oct): her live voice. The one
   control on every page: a round gold button beside the typing box, a five-bar wave inside (icon only: no words in the circle),
   "Talk to Hera" and "Live voice" beneath on their own lines (a long language wraps; never below 10 px). Its words follow the
   call (data-state). Shown only when voice is on; the call opens as a card at the bottom of the page (static/book/voice.js). */
.talkgo{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;width:74px;padding:0;margin:0 -4px;background:none;border:0;color:var(--on-gold);cursor:pointer}
.talkgo[hidden]{display:none}
.talkgo .orb{width:56px;height:56px;border-radius:50%;background:var(--grad);display:grid;place-items:center;box-shadow:0 8px 20px rgba(169,131,45,.4);transition:box-shadow .3s var(--ease)}
.talkgo .tl{display:flex;flex-direction:column;align-items:center;gap:1px;max-width:78px;min-width:0}
.talkgo .tw{font:500 10.5px/1.2 var(--sans);color:var(--ink);text-align:center;max-width:78px;overflow-wrap:anywhere}
.talkgo .lv{font:500 10px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--gold);text-align:center;max-width:78px;overflow-wrap:anywhere}
:lang(ta) .talkgo .lv,:lang(hi) .talkgo .lv,:lang(zh) .talkgo .lv,:lang(ja) .talkgo .lv,:lang(ko) .talkgo .lv,:lang(ru) .talkgo .lv{letter-spacing:0;text-transform:none}
.talkgo:focus-visible .orb{outline:2px solid var(--gold);outline-offset:3px}
.talkgo[data-state="listening"] .orb{box-shadow:0 0 0 3px rgba(179,53,59,.38),0 8px 20px rgba(169,131,45,.4)}
.talkgo[data-state="error"] .tw{color:#B3353B}
/* the wave: five bars, each scaled from its own resting height (--b). Still when idle, ended or in error (no animation at all);
   a slow shimmer (opacity) while connecting or checking; a gentle pulse while listening; while Hera speaks the bars follow her
   real level (--lv, 0..1, set by living.js from the player's level messages). Transform and opacity only, so nothing shifts. */
.talkgo .wv{display:flex;align-items:center;gap:3px;height:26px}
.talkgo .wv i{display:block;width:3px;height:22px;border-radius:2px;background:currentColor;transform:scaleY(var(--b,.5));transform-origin:center;will-change:transform,opacity}
.talkgo .wv i:nth-child(1){--b:.3;--d:.00s}
.talkgo .wv i:nth-child(2){--b:.55;--d:.12s}
.talkgo .wv i:nth-child(3){--b:1;--d:.24s}
.talkgo .wv i:nth-child(4){--b:.55;--d:.36s}
.talkgo .wv i:nth-child(5){--b:.3;--d:.48s}
.talkgo[data-state="connecting"] .wv i,.talkgo[data-state="checking"] .wv i{animation:tkshimmer 1.6s ease-in-out infinite;animation-delay:var(--d)}
.talkgo[data-state="listening"] .wv i{animation:tkpulse 1.4s ease-in-out infinite;animation-delay:var(--d)}
.talkgo[data-state="speaking"] .wv i{animation:none;transform:scaleY(calc(var(--b,.5) * (.35 + var(--lv,0) * 1.3)));transition:transform .06s linear}
@keyframes tkshimmer{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes tkpulse{0%,100%{transform:scaleY(calc(var(--b,.5) * (.85 + var(--lv,0) * .4)))}50%{transform:scaleY(calc(var(--b,.5) * (1.15 + var(--lv,0) * .6)))}}
@media (prefers-reduced-motion:reduce){
  .talkgo .wv i{animation:none!important;transition:none!important;transform:scaleY(var(--b,.5))!important}
  .talkgo[data-live="1"] .wv i{opacity:.6}
  .talkgo[data-state="listening"] .wv i{opacity:.85}
  .talkgo[data-state="speaking"] .wv i{opacity:calc(.55 + var(--lv,0) * .45)}
}
/* the ONE control on every page (owner, 17 Oct): beside Book on the details step too, and in the team-and-time page's bar; only her own
   "Tap only" hides it */
.dock.taponly .talkgo{display:none}
.tt-bar-in .talkgo{margin:0 -6px}
.hv-tip{margin-top:6px;font-size:12px;line-height:1.4;color:var(--gold);text-align:center}
.hv-tip[hidden],.hv-stop[hidden]{display:none}
.hv-help{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.hv-help:empty{display:none}
.hv-stop{border:1px solid #B3353B;color:#B3353B}
.hv{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:center;padding:0 0 env(safe-area-inset-bottom,0px);pointer-events:none}
.hv-card{pointer-events:auto;width:100%;max-width:480px;max-height:82svh;overflow:auto;overscroll-behavior:contain;background:var(--page);
  border-radius:22px 22px 0 0;border:1px solid var(--line-2);border-bottom:0;box-shadow:0 -14px 40px rgba(60,42,14,.24);padding:16px 16px 14px;
  animation:fade .35s var(--ease) both}
.hv-head{display:flex;align-items:center;gap:10px}
.hv-head .seal{width:30px;height:30px;font-size:16px;line-height:30px;flex:none}
.hv-who{flex:1;min-width:0}
.hv-who b{display:block;font:500 21px/1.1 var(--serif);color:var(--ink)}
.hv-who small{display:block;font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-top:3px}
.hv-orb{display:flex;align-items:center;gap:3px;height:22px;flex:none}
.hv-orb i{width:4px;height:8px;border-radius:2px;background:var(--gold-bright);transition:height .2s var(--ease)}
.hv[data-mode="speak"] .hv-orb i{animation:hvbar .9s ease-in-out infinite}
.hv[data-mode="speak"] .hv-orb i:nth-child(2){animation-delay:.15s}
.hv[data-mode="speak"] .hv-orb i:nth-child(3){animation-delay:.3s}
.hv[data-mode="listen"] .hv-orb i{background:#B3353B;height:10px}
.hv[data-mode="think"] .hv-orb i{animation:pulse 1.2s var(--ease) infinite}
@keyframes hvbar{0%,100%{height:6px}50%{height:20px}}
@media (prefers-reduced-motion:reduce){.hv .hv-orb i,.hv-card{animation:none!important}}
.hv-status{margin-top:10px;font:italic 400 15px/1.3 var(--serif);color:var(--muted);text-align:center}
.hv-log{margin-top:10px;max-height:28svh;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.hv-log:empty{display:none}
.hv-log p{max-width:88%;padding:7px 11px;border-radius:12px;font:400 15px/1.4 var(--sans);color:var(--ink-soft);overflow-wrap:anywhere}
.hv-log p b{display:block;font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:2px;font-weight:500}
.hv-hera{align-self:flex-start;background:rgba(200,169,107,.14)}
.hv-you{align-self:flex-end;background:#fff;border:1px solid var(--line)}
.hv-cards{margin-top:6px}
.hv-cards .book{margin:10px 0 0}
.hv-cards .hint,.hv-msg{font:italic 400 14px/1.4 var(--serif);color:var(--muted);text-align:center;margin-top:8px}
.hv-read .hv-for{font-size:13px;color:var(--muted);text-align:center;margin-top:10px}
.hv-read .hv-pol{text-align:center;font-size:12px;color:var(--muted);margin-top:6px}
.hv-read .hv-pol .inl{background:none;border:0;padding:0;font:inherit;color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.hv-read .hv-say{margin-top:10px;text-align:center;font:italic 500 19px/1.3 var(--serif);color:var(--gold)}
.hv-done h2{font:300 30px/1.1 var(--serif);color:var(--ink);text-align:center}
.hv-acts{display:flex;gap:8px;margin-top:14px}
.hv-acts button{flex:1;height:46px;font-size:9px;letter-spacing:.22em;text-transform:uppercase}
.hv-type{border:1px solid var(--line-2);color:var(--gold)}
.hv-end{background:var(--grad);color:var(--on-gold);box-shadow:0 6px 14px rgba(169,131,45,.3)}
.hv-note{margin-top:10px;font-size:11px;line-height:1.4;color:var(--faint);text-align:center}

/* Hera asks first (batch 12, owner 11 Oct): one polite question on the visit card, never a claim about other clients.
   Under her services (data-under) or, for a haircut, below the card; buttons are at least 44px; a sheet lists a group's services. */
.hera{padding:12px 14px 4px;border:1px solid var(--line-2);border-radius:6px;background:rgba(250,246,236,.55)}
.hera[data-under]{margin:10px 0 4px}
.hera:not([data-under]){margin:12px 16px 0}
.hera .hl{display:block;font-size:8px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.hera .hq{font:italic 400 17.5px/1.4 var(--serif);color:var(--ink);margin-top:5px;text-wrap:pretty}
:lang(zh) .hera .hq,:lang(ja) .hera .hq,:lang(ko) .hera .hq,:lang(ta) .hera .hq{font-style:normal}
:lang(ta) .hera .hq{font-size:15px;line-height:1.55}
:lang(zh) .hera .hq,:lang(ja) .hera .hq,:lang(ko) .hera .hq{font-size:16px;line-height:1.55}
.hera .hbtn{display:flex;flex-direction:column;align-items:stretch;margin-top:10px}
.hera .hyes{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:48px;padding:6px 16px;border-radius:24px;
  background:var(--grad);color:var(--on-gold);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-align:left}
:lang(ta) .hera .hyes,:lang(zh) .hera .hyes,:lang(ja) .hera .hyes,:lang(ko) .hera .hyes{font-size:12.5px;letter-spacing:.02em;text-transform:none}
.hera .hyes .ym{font:500 13px/1.25 var(--serif);letter-spacing:0;text-transform:none;text-align:right}
.hera .hchips{display:flex;flex-wrap:wrap;gap:8px}
.hera .hchip{min-height:44px;padding:0 16px;border:1px solid var(--gold);border-radius:22px;background:rgba(255,255,255,.4);color:var(--gold);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;text-align:center}
.hera .nothanks{margin:2px 0 2px auto;min-height:44px;padding:0 4px}
.hlist{margin-top:6px}
.hlist .row{width:100%}
.hsub{margin:14px 0 2px;font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
:lang(ta) .hera .hchip,:lang(zh) .hera .hchip,:lang(ja) .hera .hchip,:lang(ko) .hera .hchip{font-size:13px;letter-spacing:.02em;text-transform:none}
:lang(ta) .hera .hyes{flex-direction:column;align-items:flex-start;gap:2px;padding:8px 18px}
:lang(ta) .hera .hyes .ym{text-align:left}

/* ---------- the first menu, the hair-length page and the services page of several services in one visit (12 Oct 2026) ----------
   Hera's one look (hera-look.css): the same parchment, gold and serif; only the marks, the ribbon and the bar are new. */
.vr-menu,.vr-svc,.vr-foot{--warn:#8A3B12}      /* the rust of "not on the same day": also in the foot, which sits in the dock */
/* a row: its name, one line that answers back, and its mark. Every answer it can give sits in the same place and only one is
   seen, so the row is as tall as its longest answer in any language and nothing moves under her finger (M7) */
.row.grp.vr{align-items:center;gap:12px}
.row.grp.vr .n{flex:1;min-width:0}
.vr-st{display:grid}
.vr-st>.vr-a{grid-area:1/1;visibility:hidden;display:block;margin-top:3px;font:italic 400 14.5px/1.3 var(--serif);color:var(--muted)}
.vr-st>.vr-a.on{visibility:visible}
.vr-st>.vr-a.ok,.vr-st>.vr-a.tip,.vr-st>.vr-a.no{font:400 13.5px/1.35 var(--sans);font-style:normal}
.vr-a.ok{color:var(--ok)}
.vr-a.tip{color:var(--ink-soft)}
.vr-a.no{color:var(--warn)}
.vr-mk{display:grid;flex:none;align-self:center}
.vr-mk>.mk{grid-area:1/1}
.mk{display:grid;place-items:center;min-width:30px;height:30px;padding:0 4px;border-radius:15px;border:1.5px solid var(--gold);font:600 20px/1 var(--serif);color:var(--gold);justify-self:end;white-space:nowrap}
.mk.on{background:var(--grad);border-color:transparent;color:var(--on-gold);font-size:18px}
.mk.inc{border-style:dashed;border-color:var(--ok);color:var(--ok)}
.mk.later{border-style:dashed;font:500 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:0 8px;color:var(--ink-soft)}
.mk.sz{visibility:hidden}
.mk.hollow{border-style:dashed;border-color:var(--line-2)}
.mk .ck svg,.rb-b .ck svg,.rb-k .ck svg{width:14px;height:14px;display:block}
.rb-k .ck{display:inline-block;margin-right:4px;vertical-align:-2px}
/* the foot: her visit drawn as time, and the bar, above Tell Hera */
.vr-foot{padding:0 0 10px}
.vr-rib{display:flex;flex-direction:column;gap:5px;margin:0 0 8px}
.vr-rib:empty{display:none}
.rb-l{display:flex;gap:3px;height:24px}
.rb-l.n{height:18px}
.rb-b{min-width:22px;border-radius:5px;background:var(--grad);color:var(--on-gold);display:grid;place-items:center;font:600 14px/1 var(--serif)}
.rb-b.inc{background:var(--page);border:1.5px dashed var(--ok);color:var(--ok)}
.rb-b.nl{background:var(--gold-bright);font-size:12.5px}
.rb-s{min-width:0}
.rb-k{font-size:12.5px;line-height:1.45;color:var(--ink-soft)}
.rb-k span{margin-right:8px;display:inline-block}
.rb-k b{font:600 14px var(--serif);margin-right:4px;color:var(--ink)}
.rb-k .ok,.rb-k .ok b{color:var(--ok)}
.rb-k.rb-2{color:var(--warn)}
.vr-bar{display:flex;align-items:center;gap:12px;min-height:48px}
.vr-bar .talkgo{margin:0}           /* the one Talk control, beside Continue while the summary is the foot (owner, 16 Oct) */
.vr-bar-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.vr-bar-t b{font:600 19px/1.15 var(--serif);color:var(--ink)}
.vr-bar-t span{font-size:12.5px;line-height:1.3;color:var(--muted)}
.vr-bar-t .bar-e{font-size:14.5px;color:var(--ink-soft);text-align:center}
.vr-go{flex:none;min-height:46px;padding:13px 22px;border-radius:999px;background:var(--grad);color:var(--on-gold);font-weight:500;letter-spacing:.06em;text-align:center}
/* the services page */
.vr-svc .sec-h{font:500 25px/1.15 var(--serif);color:var(--ink);padding:14px 0 6px}
.vr-svc .sec-note{font-size:13.5px;line-height:1.4;color:var(--ink-soft);margin:0 0 10px}
.vr-svc .sec-note.ok{color:var(--ok)}
.vr-svc .sec-note.no{color:var(--warn)}
.vr-svc .hint{font-size:14px;padding:8px 0 4px;text-align:left}
.vr-ql{display:block}
.vr-svc input[type=search]{width:100%;min-height:48px;margin:2px 0 6px;padding:10px 2px;border:0;border-bottom:1px solid var(--line-2);background:transparent;font:400 17px var(--serif);color:var(--ink);border-radius:0}
.vr-svc input[type=search]::placeholder{color:var(--faint);opacity:1}
.vr-svc .sg-l{font:500 12px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);padding:14px 0 6px;border-top:1px solid var(--line)}
.vr-svc .sg{display:flex;align-items:center;gap:10px;width:100%;min-height:54px;padding:10px 0;text-align:left;border-top:1px solid var(--line)}
.vr-svc .sg-t{flex:1;min-width:0;font:500 21px/1.15 var(--serif);color:var(--ink)}
.vr-svc .sg-c{font-size:12.5px;color:var(--muted);text-align:right}
.vr-svc .sg svg{width:14px;height:14px;flex:none;color:var(--gold);transition:transform .2s}
.vr-svc .sg[aria-expanded="true"] svg{transform:rotate(180deg)}
.vr-svc .sg-b{background:var(--page-2)}
.sv{display:grid;grid-template-columns:30px minmax(0,1fr);gap:0 12px;align-items:center;width:100%;min-height:56px;padding:10px 0;text-align:left;border-top:1px solid var(--line)}
.sv[aria-pressed="true"]{background:linear-gradient(90deg,rgba(200,169,107,.24),transparent)}
.sv-n{min-width:0;font:400 15.5px/1.3 var(--sans);color:var(--ink-soft);display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.sv-n small{font-size:12.5px;line-height:1.35;color:var(--muted);letter-spacing:0;text-transform:none}
.sv-n small.ok,.sv.inc small,.sv.inc .sv-p{color:var(--ok)}
.sv .p{font:600 18px/1.15 var(--serif);color:var(--gold);text-align:right;grid-column:2;text-align:left}
.sv .p small{font:italic 400 13px var(--serif);color:var(--faint);margin-right:4px}
.sv-p{font:400 12.5px var(--sans);grid-column:2;text-align:left}
.sv>.mk{grid-row:1/span 3;align-self:center}
.sv-n{grid-column:2}
.sv.blk .sv-n{color:var(--muted)}
.sv-n .mini,.snote .mini{min-height:44px;padding:9px 16px;border-radius:999px;border:1px solid var(--line-2);background:var(--page-2);font:400 14px var(--sans);color:var(--ink);display:inline-flex;align-items:center;box-shadow:none;width:auto;height:auto;margin-top:6px}
.snote{font-size:13.5px;line-height:1.4;color:var(--ink-soft);padding:10px 0 12px 42px;border-top:1px dashed var(--line-2);background:var(--page-2);display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.vr-visit{margin-top:16px;padding:6px 14px 12px;border:1px solid var(--line-2);border-radius:6px;background:var(--page)}
.vr-visit .sec-h{font-size:22px;padding-top:8px}
.vl{list-style:none}
.vl li{display:grid;grid-template-columns:minmax(0,1fr) auto 44px;gap:8px;align-items:center;border-top:1px solid var(--line);font-size:15px;min-height:46px}
.vl li:first-child{border-top:0}
.vl li .x{width:44px;height:44px;font-size:22px;line-height:1;color:var(--muted);text-align:center}
.vr-more{padding-bottom:6px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{min-height:44px;padding:9px 15px;border-radius:999px;border:1px solid var(--line-2);background:var(--page);font-size:14.5px;color:var(--ink)}
.vr-hera .hera{margin:14px 0 0}
.vr-len .hint{text-align:center}
.vr-len .lengths .len{min-height:44px}
/* the foot sits over the end of the page, just above Tell Hera, and takes no room of its own: the page never changes height when
   the ribbon grows or shrinks, so the control she tapped never moves (F3); the end of the page keeps room for it */
.dock .vr-foot{position:absolute;left:0;right:0;bottom:calc(100% - 18px);padding:10px 16px 10px;background:linear-gradient(to top,var(--parchment) 85%,rgba(239,231,212,0))}
.vr-spacer{height:0}
html{scroll-padding-bottom:var(--vr-foot-h,0px)}      /* a control she reaches by keyboard is scrolled clear of the foot */
.dock .vr-foot[data-mode="len"]{position:static;padding:8px 0 0;background:none}
.vr-svc .ey,.vr-len .ey{font-size:11px}

/* ---------- Hera Privilege (owner, 16 Oct 2026): one quiet entry line on the first screen, the list sheet, the gold line on a time of
   the ordinary picker, the rate under the total. Gold and ink only: never a banner, red, a strike-through or a timer. ---------- */
.pv-host:empty{display:none}
.pv-entry{align-items:center;min-height:56px;padding:12px 0 11px}
.pv-entry .n .pv-line{display:block;font:italic 400 15.5px/1.3 var(--serif);color:var(--ink)}
.pv-entry .p{font:400 24px/1 var(--serif);color:var(--gold);padding-left:4px}
.pv .pv-q{font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:14px}
.pv .pv-len{margin:0 -22px;padding:8px 22px 2px}
.pv-card{margin-top:14px;border-top:1px solid var(--line-2)}
.pv-h{display:flex;align-items:baseline;gap:10px;padding:12px 0 2px}
.pv-h b{font:500 22px/1 var(--serif);color:var(--ink)}
.pv-h span{font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.pv-note{font:italic 400 13.5px/1.4 var(--serif);color:var(--muted);padding:4px 0 2px}
.pv-opt{align-items:center;min-height:56px}
.pv-opt .n .pv-nm{display:block;font:500 17px/1.25 var(--serif);color:var(--ink)}
.pv-opt .n .pv-nm small{display:inline-block;margin-left:8px;font:400 8px/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);vertical-align:middle}
.pv-opt .n .pv-nm small.pv-lenw{color:var(--muted)}
.pv-rate{display:block;font:italic 400 13.5px/1.35 var(--serif);color:var(--ink-soft);margin-top:3px}
.pv-rate .pv-usual{color:var(--muted);font-size:12.5px}
.pv-more{display:block;width:100%;min-height:44px;text-align:left;padding:10px 0 6px;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);text-decoration:underline;text-underline-offset:4px}
.t.pv{min-width:auto;padding:0 12px;box-shadow:inset 0 0 0 1px var(--gold-bright)}
.t.pv small.pv-gold{white-space:nowrap;text-transform:none;letter-spacing:0;font:italic 400 10.5px/1 var(--serif);opacity:1}
.pv-total{padding:0 0 6px;text-align:right;margin-top:-2px}
.pv-when .tt-when-p{font-size:14px;color:var(--ink-soft);padding:2px 0 6px}
.pv-done .pv-total{text-align:left;margin-top:4px}
.pv-refused .acts .m,.pv-refused .acts .s{font-style:normal}

/* ---------- team and time (P4; the team-and-time pack R1-R19, with the owner's choice B for the stylist section): one phone
   column in Hera's own look; the chosen visit and its bar stay at the foot, in the page's flow (sticky), so they never hide a control ---------- */
.tt{display:flex;flex-direction:column;gap:26px;padding:6px 16px 28px}
.tt-s{display:flex;flex-direction:column;gap:12px}
.tt-s[hidden]{display:none}
.tt-stack{display:flex;flex-direction:column;gap:12px}
.tt-quick .tt-stack{gap:8px}
.tt-head h1{font:500 32px/1.08 var(--serif);color:var(--ink);text-wrap:balance}
.tt h2{font:500 25px/1.15 var(--serif);color:var(--ink)}
.tt h3{font:500 12px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.tt .ey{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:400}
.tt .hint{font:300 13.5px/1.4 var(--sans);text-align:left;padding:0;color:var(--muted)}
.tt-lede{color:var(--ink-soft)}
.tt-card{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid var(--line-2);border-radius:14px;background:var(--page)}
.tt-sum{font-size:15.5px;line-height:1.4}
.tt-note{font-size:14px;line-height:1.4;color:var(--ink-soft);border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:var(--page-2)}
.tt-link{align-self:flex-start;background:none;border:0;padding:0;min-height:44px;font-size:15px;color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-align:left}
.tt-sw{display:flex;align-items:center;gap:12px;min-height:44px;width:100%;text-align:left}
.tt-sw>i{position:relative;flex:none;width:44px;height:26px;border-radius:999px;background:var(--line-2);transition:background .2s}
.tt-sw>i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--page);transition:transform .2s var(--ease)}
.tt-sw[aria-checked="true"]>i{background:var(--gold)}
.tt-sw[aria-checked="true"]>i::after{transform:translateX(18px)}
.tt-sw span{font-size:15px;line-height:1.3}
.tt-sw small{display:block;font-size:13px;color:var(--muted)}
.tt-av{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;color:#FBF6EA;font:600 19px/1 var(--serif);flex:none;box-shadow:0 0 0 2px var(--page)}
.tt-av.sm{width:26px;height:26px;font-size:14px;margin-left:-6px}
.tt-av.any{background:transparent;color:var(--gold);border:1px solid var(--gold);box-shadow:none;font-size:15px}
.tt-avs{display:flex;padding-left:6px}
.tt-q{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;text-align:left;width:100%;padding:11px 16px;border-radius:14px;border:1px solid var(--line-2);background:var(--page);transition:background .2s,color .2s}
.tt-q-l{grid-column:1;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:400}
.tt-q-m{grid-column:1;display:block}
.tt-q-m b{display:block;font:600 21px/1.15 var(--serif)}
.tt-q-m small{display:block;font-size:14px;font-weight:300;color:var(--muted);overflow-wrap:anywhere}
.tt-q-r{grid-column:2;grid-row:1/span 2;display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:13.5px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.tt-grp{display:flex;flex-direction:column;gap:8px}
.tt-grp-h{display:flex;align-items:baseline;gap:8px}
.tt-col{margin-left:auto;font-style:normal;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tt-list{display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;background:var(--page)}
.tt-pr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;min-height:62px;padding:9px 14px;border:0;border-top:1px solid var(--line);background:transparent;text-align:left;transition:background .2s,color .2s}
.tt-list>.tt-pr:first-child{border-top:0}
.tt-pr-m{display:flex;flex-direction:column;min-width:0}
.tt-pr-m b{font:600 20px/1.15 var(--serif);overflow-wrap:anywhere}
.tt-pr-m b em{font:400 11px/1 var(--sans);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-left:7px;white-space:nowrap}
.tt-pr-m small{font-size:13px;color:var(--muted);line-height:1.3;overflow-wrap:anywhere}
.tt-pr-t{font-size:14px;color:var(--ink-soft);text-align:right;line-height:1.25;font-variant-numeric:tabular-nums;max-width:9.5em}
.tt-pr-t.no{color:var(--muted)}
.tt-pr-t.ok{color:var(--ok)}
.tt-pr-t.chg{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.tt-more{min-height:48px;border:0;border-top:1px solid var(--line);background:var(--page-2);font-size:15px;color:var(--gold);font-weight:400;text-align:center}
.tt-cal-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tt-cal-h b{font-weight:400;font-size:15px;text-align:center}
.tt-nav{width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--line-2);background:var(--page);font-size:22px;line-height:1;color:var(--gold);text-align:center}
.tt-nav:disabled{opacity:.35;cursor:default}
.tt-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.tt-cw{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center;padding-bottom:2px}
.tt-day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:58px;padding:4px 0;border-radius:12px;border:1px solid transparent;background:transparent;color:var(--muted);text-align:center;transition:background .2s,color .2s}
.tt-day.fit{background:var(--page);border-color:var(--line-2);color:var(--ink)}
.tt-day.off{opacity:.4}
.tt-day .dn{font:600 21px/1 var(--serif)}
.tt-day .mo{font-size:11px;letter-spacing:.08em;text-transform:uppercase;line-height:1;margin-bottom:-2px}
.tt .db{display:inline-flex;gap:2px}
.tt .db i{width:8px;height:4px;border-radius:2px;background:var(--line)}
.tt-day.fit .db i,.tt-legend .db i{background:var(--line-2)}
.tt .db i.on,.tt-day.fit .db i.on,.tt-legend .db i.on{background:var(--gold)}
.tt-legend{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13.5px;color:var(--muted)}
.tt-legend span{display:inline-flex;align-items:center;gap:6px}
@media (max-width:380px){.tt-grid{margin-inline:-10px;gap:2px}}
@media (max-width:340px){.tt-grid{margin-inline:-16px;gap:1px}}
.tt-sh{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.tt-tg{display:flex;flex-direction:column;gap:8px}
.tt-tg.hl h3{color:var(--gold)}
.tt-tg.hl .tt-tgrid{outline:1px solid var(--line-2);outline-offset:4px;border-radius:12px}
.tt-tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.tt-time{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:10px 8px 10px 10px;border-radius:12px;border:1px solid var(--line-2);background:var(--page);text-align:left;min-height:60px;min-width:0;transition:background .2s,color .2s}
.tt-time b{font:600 20px/1.1 var(--serif)}
.tt-time span{font-size:12.5px;color:var(--muted)}
.tt-time em{font-style:normal;font-size:12.5px;color:var(--gold);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* Hera Privilege's gold line on a team-and-time time (owner, 17 Oct): as on the ordinary picker */
.tt-time small.pv-gold{font:italic 400 12px/1.2 var(--serif);color:var(--gold);overflow-wrap:anywhere}
.tt-time[aria-pressed="true"] small.pv-gold{color:var(--gold-bright)}
.tt-tmore{grid-column:1/-1;min-height:46px;border:1px dashed var(--line-2);border-radius:12px;background:transparent;color:var(--gold);font-size:14.5px;text-align:center}
.tt-fix{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--line-2);border-radius:14px;background:var(--page)}
.tt-why{font:500 21px/1.2 var(--serif)}
.tt-un{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 13px;border-radius:11px;border:1px solid var(--line-2);background:var(--page-2);min-height:50px}
.tt-un b{font-weight:500;font-size:15px;overflow-wrap:break-word;min-width:0}
.tt-un span{font-size:13.5px;color:var(--gold);text-align:right}
.tt-alt{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 13px;border-radius:11px;border:1px dashed var(--line-2);background:transparent;min-height:48px}
.tt-alt b{font-weight:500;font-size:14.5px;overflow-wrap:anywhere}
.tt-alt span{font-size:13px;color:var(--gold);text-align:right}
.tt-q[aria-pressed="true"],.tt-pr[aria-pressed="true"],.tt-day[aria-pressed="true"],.tt-time[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#FBF6EA}
.tt-q[aria-pressed="true"] .tt-q-l,.tt-pr[aria-pressed="true"] .tt-pr-t:not(.no),.tt-pr[aria-pressed="true"] b em,.tt-time[aria-pressed="true"] em{color:var(--gold-bright)}
.tt-q[aria-pressed="true"] small,.tt-q[aria-pressed="true"] .tt-q-r,.tt-pr[aria-pressed="true"] small,.tt-pr[aria-pressed="true"] .tt-pr-t,.tt-time[aria-pressed="true"] span{color:rgba(251,246,234,.82)}
.tt-q[aria-pressed="true"] .tt-av,.tt-pr[aria-pressed="true"] .tt-av{box-shadow:0 0 0 2px var(--gold-bright)}
.tt-pr[aria-pressed="true"] .tt-av.any{color:var(--gold-bright);border-color:var(--gold-bright);box-shadow:none}
.tt-day[aria-pressed="true"] .db i{background:rgba(251,246,234,.3)}
.tt-day[aria-pressed="true"] .db i.on{background:var(--gold-bright)}
.tt.busy .tt-quick .tt-stack,.tt.busy .tt-grid{opacity:.62}
.tt [aria-disabled="true"],.tt-bar [aria-disabled="true"]{cursor:default}
.tt-bar [aria-disabled="true"]{opacity:.55}
.tt-rib{display:flex;flex-direction:column;gap:7px;padding:14px;border:1px solid var(--line-2);border-radius:14px;background:var(--page)}
.tt-lane{display:grid;grid-template-columns:48px 1fr;align-items:center;gap:8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tt-track{position:relative;height:16px;border-radius:8px;background:var(--page-2);overflow:hidden}
.tt-track i{position:absolute;top:0;bottom:0;border-right:2px solid var(--page)}
.tt-track i.dev{background:repeating-linear-gradient(135deg,var(--gold-bright) 0 3px,transparent 3px 7px);border-right:0}
.tt-ticks{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);padding-left:56px;font-variant-numeric:tabular-nums}
.tt-steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.tt-steps li{display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:15.5px}
.tt-steps li>span{display:block;min-width:0;overflow-wrap:anywhere}
.tt-steps li>span>span{display:inline}
.tt-steps li:first-child{border-top:0}
.tt-steps time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:14px;padding-top:1px}
.tt-steps small{display:block;color:var(--muted);font-size:13px}
.tt-steps .tt-who{display:inline-flex;align-items:center;gap:5px;font-weight:400;margin-left:6px}
.tt-steps .tt-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.tt-bill{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:14px;background:var(--page-2);border:1px solid var(--line);margin:0}
.tt-bill div{display:flex;justify-content:space-between;gap:12px;font-size:15px}
.tt-bill dt{min-width:0;overflow-wrap:anywhere}
.tt-bill dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.tt-bill .tot{border-top:1px solid var(--line-2);padding-top:8px;font-weight:500;font-size:16.5px}
.tt-bar{position:sticky;bottom:env(safe-area-inset-bottom,0px);margin-top:auto;z-index:6;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(250,246,236,.96);border-top:1px solid var(--line-2)}
.tt-bar-in{display:flex;align-items:center;gap:12px;min-height:48px}
.tt-bar-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.tt-bar-t b{font:600 19px/1.15 var(--serif);color:var(--ink)}
.tt-bar-t span{font-size:13px;line-height:1.3;color:var(--muted)}
.tt-bar-t .bar-e{font-size:14.5px;color:var(--ink-soft);text-align:center;padding:4px 0}
.tt-go{flex:none;min-height:48px;padding:13px 22px;border-radius:999px;background:var(--grad);color:var(--on-gold);font-weight:500;letter-spacing:.06em;text-align:center}
.tt-cont{display:flex;justify-content:center;padding-top:6px}
.tt-cont .tt-go{width:100%}
.tt-when .tt-when-p{font-size:14px;color:var(--ink-soft);padding:2px 0 6px}
.tt-second{margin-top:6px}
.tt-second .tt-sl{display:block;font-size:14px;line-height:1.4;color:var(--ink-soft);margin-top:3px}
.tt-second-go{display:block;margin-top:10px;min-height:48px;padding:12px 20px;border-radius:999px;background:var(--grad);color:var(--on-gold);font-weight:500;letter-spacing:.04em;text-align:center}
html:has(.tt-bar){scroll-padding-bottom:110px}          /* a control she reaches by keyboard is scrolled clear of the bar */
@media (prefers-reduced-motion:reduce){.tt *{transition:none!important}}

/* the stylist choice (owner, 13 Oct: "like the original design"): one card for each kind of work, and the existing pop-up sheet */
.tt .who.tt-scard{border:1px solid var(--line-2);border-radius:14px;background:var(--page);padding:11px 14px;text-align:left}
.tt .who .tt-pr-t{max-width:none;text-align:left;font-size:14px}
.tt .who .rl{font-size:11px;letter-spacing:.1em}
.tt .who .turn{font-size:11px;letter-spacing:.12em}
.tt .who .nm{font-size:21px}
.tt .who .fx,.tt .who .nm,.tt .who .rl{overflow-wrap:break-word;word-break:normal;hyphens:manual}
.tt .who .fx{line-height:1.3}
.tt .who .tt-cur,.tt .who .tt-nx{margin-top:1px}
@media(max-width:430px){
  .tt .who .tt-hint{display:none}
  .tt .who.tt-scard{padding:9px 12px;gap:10px}
  .tt .who .rl{margin-top:2px;line-height:1.35}
}
:lang(ta) .tt .who .nm{font-size:17px;line-height:1.3}
:lang(ta) .tt .who .rl{letter-spacing:0;text-transform:none;font-size:12px}
:lang(ta) .tt .who .turn{letter-spacing:0;font-size:11px}
:lang(ta) .tt .who .turn span,.tt .who .turn.tt-icon span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:380px){
  .tt .who .turn span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tt .who .ring{width:40px;height:40px}
  .tt .who.tt-scard{gap:8px;padding:8px 10px}
  .tt .who .nm{font-size:19px}
  :lang(ta) .tt .who .nm{font-size:15.5px}
}
.tt .who .tt-nx{color:var(--ink-soft)}
.tt-uz{font:400 11px/1 var(--sans);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-left:7px;white-space:nowrap}
.tt-sheet .ey{font-size:11px;letter-spacing:.2em}
.tt-sheet .close{font-size:11px;letter-spacing:.16em;min-height:46px;min-width:46px;padding:0 12px}
.tt-sheet .aino{font:italic 400 14px/1.4 var(--serif);color:var(--muted);text-align:center;margin:6px 0 2px}
.tt-sheet .keep{font-size:11px;letter-spacing:.16em}
.tt-sheet .sub{font-size:15px}
.tt-sheet .srow{padding:2px 0}
.tt-sheet .tt-sr{min-height:60px;padding:9px 6px 9px 12px;align-items:center;text-align:left}
.tt-sheet .tt-sr .n b{display:block;font:500 20px/1.15 var(--serif);color:var(--ink);overflow-wrap:anywhere}
.tt-sheet .tt-sr .n small{font-size:11px;letter-spacing:.1em;overflow-wrap:anywhere;line-height:1.35}
.tt-sheet .tt-sr .n .nx{font-size:14.5px}
.tt-sheet .tt-sr .tt-sub{text-transform:none;letter-spacing:0;color:var(--muted);font-size:12.5px}
.tt-sheet .tt-sr .p{font-size:16px;text-align:right;align-self:center}
.tt-sheet .tt-sr .p.at{font-size:12px;white-space:normal;max-width:7em}
.tt-sheet .tt-sr.on{background:rgba(154,122,48,.1);box-shadow:inset 3px 0 0 var(--gold)}
.tt-sheet .tt-chosen{display:block;font:500 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:3px}
.tt-sheet .pic{min-width:46px}
.tt-sheet .hom{max-width:100%}
.tt-sheet .tt-pr-t{max-width:none;text-align:left}
.tt .who .tt-cant{color:var(--ink-soft)}
:lang(ta) .tt-head h1{font-size:26px}
@media(max-width:340px){:lang(ta) .tt-head h1{font-size:23px}}
@media(max-width:340px){.tt-un{flex-wrap:wrap;gap:2px 10px;justify-content:flex-start}.tt-un span{text-align:left}}
.tt:focus{outline:none}
.tt-sheet:focus{outline:none}
/* While the visit's summary is the foot of the screen (14 Oct) the Tell Hera dock keeps its box (the page never changes height) and is not drawn;
   the summary sits at the bottom of the screen. The dock is whole again whenever there is no summary (an empty menu, Back). */
html.vr-tellmin .dock{background:none;pointer-events:none}
html.vr-tellmin .dock>*:not(.vr-foot){visibility:hidden}
html.vr-tellmin .dock .vr-foot{bottom:0;pointer-events:auto}
/* Special requests (owner, 16 Oct 2026; static/book/requests.js): one row on the details step, its sheet, and "Your requests" on the
   confirmation. Chips are full-width rows (a long Tamil line wraps, never sideways), 48px tall at least. */
.rq-row{width:100%;margin-top:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rq-row .rq-h{display:block;font:italic 400 17px/1.3 var(--serif);color:var(--ink-soft)}
.rq-row .n .rq-sum{display:block;font:400 12.5px/1.45 var(--sans);letter-spacing:0;text-transform:none;color:var(--muted);margin-top:4px;overflow-wrap:anywhere}
.rq-row .rq-act{font:500 16px/1 var(--serif);align-self:center}
.rq-orph{color:var(--muted);font-style:italic}
.rq-sheet .rq-head{margin-bottom:6px}
.rq-sheet h3{font-size:25px;line-height:1.15}
:lang(ta) .rq-sheet h3,:lang(hi) .rq-sheet h3,:lang(ru) .rq-sheet h3{font-size:21px;line-height:1.35}
.rq-chips{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.rq-chip{display:block;width:100%;min-height:48px;padding:11px 14px;text-align:left;background:#fff;border:1px solid var(--line-2);font:400 15px/1.35 var(--sans);color:var(--ink-soft);overflow-wrap:anywhere}
.rq-chip.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);color:var(--ink);background:var(--page-2)}
.rq-chip.on::before{content:"✓ ";color:var(--gold)}
.rq-time{margin-top:6px}
.rq-time[hidden]{display:none}
.rq-own{display:block;margin-top:16px}
.rq-own span{display:block;font:400 13px/1.4 var(--sans);color:var(--muted);margin-bottom:6px}
.rq-own textarea{display:block;width:100%;padding:10px 12px;border:1px solid var(--line-2);background:#fff;font:400 16px/1.4 var(--sans);color:var(--ink);resize:vertical}
.rq-own textarea:focus{outline:none;border-color:var(--gold)}
.rq-orphans{margin-top:12px}
.rq-o{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font:400 14px/1.4 var(--sans);color:var(--ink-soft)}
.rq-rm{flex:none;min-height:44px;padding:0 10px;font:500 12px var(--sans);color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.rq-done{display:block;width:100%;margin-top:18px;min-height:50px;background:var(--grad);color:var(--on-gold);font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.rq-conf .rq-i{margin:5px 0 0;font-style:normal;font-size:14px}
.rq-conf .rq-i small{display:block;font:400 12px/1.4 var(--sans);color:var(--muted);margin-top:2px}
.rq-conf .rq-her{font-style:italic}

/* Hera Looks (instagram.py; owner, 16-17 Oct): Hera's own look - square-cornered tiles, a thin gold rule, no Instagram marks */
.igl .igchips{margin:2px -22px 0;padding:12px 22px 2px}
.igchips button,.igtabs button{min-height:44px}
.igtabs{padding:12px 0 2px;flex-wrap:nowrap}
.igtabs button{flex:1 1 0;min-width:0;text-align:center;line-height:1.35;padding:6px 8px}
.igg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px;margin-top:14px}
.igt{position:relative;display:block;min-width:0;min-height:44px;padding:0;text-align:left;background:none;border:0;border-radius:0}
.igt .igim{position:relative;display:block}
.igt img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:0;background:var(--page-2);
  border:0;border-bottom:1px solid var(--gold-bright)}
.igt .ok{position:absolute;right:6px;top:6px;padding:4px 6px 3px;background:var(--gold);color:var(--page);font-size:7.5px;letter-spacing:.14em;text-transform:uppercase}
.igt .ign{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:8px;font:400 15px/1.3 var(--serif);color:var(--ink);overflow-wrap:anywhere}
.igt .igp{display:block;margin-top:3px;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.igd .lim img{border-radius:0;border:0;border-bottom:1px solid var(--gold-bright)}
.igd .igcap{font:italic 400 15px/1.45 var(--serif);color:var(--ink);margin-top:12px;overflow-wrap:anywhere}
.igd .igby{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.igd .igout{display:inline-block;min-height:44px;line-height:44px;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px}
.igacts{flex-direction:column}
.igacts button{flex:none;min-height:46px;height:auto;padding:8px 10px;line-height:1.35}
.inspo .igpv .igtag{font:500 7px/1.25 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);text-align:center}
.inspo .igpv img{border-radius:0;border-color:var(--gold-bright)}
/* budget help (owner, 17 Oct 2026; budget_help.py): only while a budget is active; quiet, no red, no strike-through */
.bud{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.bud-h{font:italic 400 17px/1.3 var(--serif);color:var(--ink-soft);margin-bottom:6px}
.bud-o{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line)}
.bud-w{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.bud-w b{font:400 15px/1.3 var(--serif);color:var(--ink)}
.bud-w small{font:400 12.5px/1.4 var(--sans);color:var(--muted)}
.bud-p{font:400 13px/1.4 var(--sans);color:var(--ink-soft)}
.bud-use{flex:none;min-height:40px;padding:0 14px}
.bud-ask small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.bud-line{margin-top:8px;font:400 12.5px/1.45 var(--sans);color:var(--muted)}
.bud-more{margin-top:4px}
/* Hair extensions: "Anything else at the same visit?" and the swap line (owner, 17 Oct 2026; living.js extSameEl, extSwapEl) */
.xsame{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.xsame .sg-l{margin:4px 0 6px}
.xsame .vl{margin:0 0 8px}
.xsame .vl li .inl{min-height:44px;text-align:left;font-size:14.5px;color:var(--gold);text-decoration:underline}
.xsame .xsame-l{font-size:13.5px;line-height:1.45;color:var(--ink-soft);margin:8px 0 4px}
.xsame .mini{min-height:44px;padding:9px 16px;border-radius:999px;border:1px solid var(--line-2);background:var(--page-2);font:400 14px var(--sans);color:var(--ink);margin:2px 0 8px}
.xsame .lv-q{margin-top:16px}
.xsame-p{margin:10px 0 4px}
.xsame-pw{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%}
.xsame-pw .sv-why{font-size:12.5px;line-height:1.4;color:var(--muted);padding:0 4px 4px}
.xsame-bar{display:flex;flex-direction:column;gap:2px;margin:14px 0 0;padding-top:10px;border-top:1px solid var(--line)}
.xsame-bar b{font:600 18px/1.2 var(--serif);color:var(--ink)}
.xsame-bar .x{font-size:12.5px;color:var(--muted)}
.xsv-h .r span{font-family:var(--serif);font-size:18px}
.ext-swap{display:flex;flex-direction:column;gap:8px}
.ext-panel .xref{font-size:13px;line-height:1.45;margin:0 0 12px}

/* ---- E2E audit fixes, 17 Oct 2026 ---- */
/* finding 10/11: a guaranteed gap between the logo and the language and salon, in every language: the right side never shrinks
   below its own words (so nothing spills over the logo); the logo gives way a little first; on a phone Back is its arrow alone
   (its name stays for screen readers) */
.top .r{flex:1 1 auto;min-width:min-content}
.brand{flex:0 1 auto;min-width:72px}
.brand img{max-width:100%}
/* one header height in every language (17 Oct): the logo may give up width, never height, so the header never follows the words beside it */
.brand img{height:54px;object-fit:contain;object-position:left center}
@media(max-width:380px){.brand img{height:46px}}
@media(max-width:340px){.brand img{height:43px}}
@media(max-width:480px){.top .back{margin-right:2px}.top .back > span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
/* finding 11: "from S$414.20" with its space */
.vl .p > small:first-child{margin-right:.3em}
/* finding 6: Hera's AI couldn't be reached: one honest line and "Talk to a person" */
.dock .telldown .say .inl{white-space:nowrap;font-style:normal;color:var(--gold);text-decoration:underline;text-underline-offset:3px;min-height:44px;padding:0 2px}
/* finding 11: where she'd like to sit, one row of two (a long Tamil line still wraps) */
.rq-spot{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.rq-spot-l{flex:1 0 100%;font:400 13px/1.4 var(--sans);color:var(--muted)}
.rq-spot .rq-c{flex:1 1 40%;min-width:0;display:flex}
.rq-spot .rq-chip{height:100%}
/* finding 11: the foot at most about 15% of a phone's screen: the bar of her visit thin and labelled ("Your visit"), its legend read
   to screen readers only (her services are named on the page itself), Tap only kept for the first screen */
.vr-rib{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:3px;align-items:center;margin:0 0 6px}
.rb-lab{grid-column:1;grid-row:1 / span 2;font:500 11px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.vr-rib .rb-l{grid-column:2;height:16px;gap:2px}
.vr-rib .rb-l.n{height:14px}
.vr-rib .rb-b{min-width:16px;border-radius:3px;font-size:11px;line-height:1}
.vr-rib .rb-b.nl{font-size:11px}
.vr-rib .rb-b .ck svg{width:10px;height:10px}
.vr-rib .rb-k:not(.rb-2){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vr-rib .rb-k.rb-2{grid-column:1 / -1;font-size:12px;line-height:1.35}
.vr-bar-t .bar-e{font-size:13px}
.vr-bar:not(:has(.vr-go)){min-height:0}
.dock:has(> .vr-foot[data-mode="svc"]) .tapsw,.dock:has(> .vr-foot[data-mode="len"]) .tapsw{display:none}
/* finding 7: the lowest price the visit can be booked at, under "Nothing on our menu fits" */
.bud-from{margin:6px 0 0;font:600 19px/1.2 var(--serif);color:var(--ink)}
/* finding 11: one way to add her photo on a screen: while her visit card has its photo box, the dock's Photo button steps aside */
body:has(.vpage .inspo) .dock [data-photo="dock"]{display:none}
/* "My Hera" in the header on every screen (owner, 25 Oct 2026): the calendar mark with its name beneath, as narrow as the words allow */
.top .r button.mybtn{flex-direction:column;justify-content:center;align-items:center;gap:2px;text-align:center;max-width:64px;color:var(--ink-soft)}
.top .r button.mybtn svg{width:15px;height:15px}
/* (25 Oct 2026, the check of ac56ab0) a phone narrower than 360 px (rare: the oldest small phones) has no room for a fourth
   44 px control beside the call button when gift vouchers are on: there the top bar keeps its three, and My Hera stays one tap
   away on the home page ("Already booked? See your bookings") */
@media (max-width:359px){.top .r button.mybtn.crowd{display:none}}
/* "Booked already? See your bookings" under "Find my usual", and what the email-link sheet says after she asks */
.known .seebk{display:block;width:100%;min-height:44px;margin-top:4px;font:400 9px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);text-decoration:underline;text-underline-offset:4px}
:lang(ta) .known .seebk,:lang(hi) .known .seebk,:lang(zh) .known .seebk,:lang(ja) .known .seebk,:lang(ko) .known .seebk{letter-spacing:0;font-size:11px}
.known .mysaid .pol{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--ink-soft)}
.known .mysaid .person{border-top:1px solid var(--line)}