/* The customer's chat (track.html), laid out like Ask: one centred column, our
   replies as plain text under a small header, theirs in a soft bubble, and a
   rounded composer at the bottom. Colours and type come from app.css. */
body.care { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
.care-top { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--card); border-bottom: 1px solid var(--line); }
.care-top .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.care-top .name { font-weight: 600; letter-spacing: -.01em; }
.care-top .chip { margin-left: 6px; }
.care-top .staff { margin-left: auto; font-size: var(--fs-small); color: var(--ink-3); text-decoration: none; }
.care-top .staff:hover { color: var(--ink); text-decoration: underline; }
.care-main { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; max-width: none; margin: 0; }
.care .thread { flex: 1; overflow-y: auto; padding: 28px max(20px, calc((100% - 760px) / 2)) 12px; display: flex; flex-direction: column; gap: 18px; }

/* the welcome: a new chat */
.hello { margin: auto 0; text-align: center; padding: 20px 0; }
.hello .mark.big { font-size: 13px; padding: 5px 12px; }
.hello h1 { font-size: 30px; font-weight: 500; letter-spacing: -.02em; margin: 18px 0 8px; color: var(--navy); }
.hello > p { color: var(--ink-2); max-width: 520px; margin: 0 auto 26px; line-height: 1.6; }
.pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: left; max-width: 640px; margin: 0 auto; }
.pick-c { font: inherit; color: inherit; background: var(--card); border: 1.5px solid var(--line-2); border-radius: var(--radius); padding: 18px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: border-color var(--ease), background var(--ease), box-shadow var(--ease); }
.pick-c:hover { border-color: var(--steel); background: var(--navy-50); }
.pick-c.on { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(46,95,128,.15); background: var(--navy-50); }
.pick-c .bk { align-self: flex-start; }
.pick-c b { font-size: 16px; font-weight: 600; }
.pick-c span:last-of-type { font-size: var(--fs-small); color: var(--ink-3); line-height: 1.5; }
.mine { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 26px; font-size: var(--fs-small); color: var(--ink-3); }
.mine > span { width: 100%; }
.mine .pill { background: var(--card); color: var(--ink-2); border: 1px solid var(--line-2); text-decoration: none; padding: 6px 12px; }
.mine .pill:hover { border-color: var(--steel); color: var(--ink); }

/* the conversation */
.case { align-self: center; font-size: var(--fs-small); color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.msg-u { align-self: flex-end; max-width: 78%; background: var(--info-bg); color: var(--navy); padding: 10px 14px; border-radius: 16px 16px 4px 16px; line-height: 1.55; }
.msg-u p { margin: 0 0 6px; } .msg-u p:last-of-type { margin-bottom: 0; }
.msg-u small, .msg-a small { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }
.msg-u small { text-align: right; }
.msg-u .pics { margin: 0 0 6px; }
.msg-a { display: flex; flex-direction: column; gap: 6px; max-width: 100%; }
.msg-a .who { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--ink-2); }
.msg-a .who .av { width: 24px; height: 24px; font-size: 9.5px; }
.msg-a .md { line-height: 1.65; color: var(--ink); }
.msg-a .md p { margin: 0 0 10px; } .msg-a .md p:last-child { margin-bottom: 0; }
.msg-u.new, .msg-a.new, .care .ev.new { animation: rise .22s cubic-bezier(.32,.72,0,1) both; }
.care .ev { margin: 4px 0; }
.dots { display: flex; gap: 4px; padding: 6px 0; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--navy-300); animation: blink 1.2s infinite both; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }

/* the composer */
.care-composer { padding: 8px max(20px, calc((100% - 760px) / 2)) 14px; background: linear-gradient(transparent, var(--bg) 30%); }
.comp-row { display: flex; align-items: flex-end; gap: 6px; background: var(--card); border: 1px solid var(--line-2); border-radius: 18px; padding: 6px; box-shadow: var(--shadow-md); transition: border-color var(--ease); }
.comp-row:focus-within { border-color: var(--steel); }
.comp-row textarea { flex: 1; border: 0; resize: none; font: inherit; padding: 9px 4px; max-height: 160px; background: none; outline: none; color: var(--ink); }
.comp-row textarea:disabled { cursor: not-allowed; }
.comp-row .iconbtn[disabled] { opacity: .5; cursor: default; }
.comp-foot { margin: 6px 0 0; font-size: 12px; color: var(--ink-3); text-align: center; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.keep { display: flex; align-items: center; gap: 12px; padding: 10px max(20px, calc((100% - 760px) / 2)); background: var(--pop-bg); color: var(--navy); font-size: var(--fs-small); border-bottom: 1px solid var(--pop-soft); }
.keep span { flex: 1; }
.keep .ghost { font: inherit; font-weight: 500; background: var(--card); border: 1px solid var(--pop-soft); border-radius: var(--pill); padding: 5px 12px; cursor: pointer; color: var(--navy); }
.keep .x { border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--ink-3); }
.hidden { display: none !important; }
.care .closedbar { max-width: 760px; margin: 0 auto 14px; border-radius: var(--radius); border: 1px solid var(--line); }

@media (max-width: 720px) {
  .pick { grid-template-columns: 1fr; }
  .hello h1 { font-size: 24px; }
  .care-top { padding: 10px 16px; }
  .msg-u { max-width: 88%; }
  .keep { padding: 10px 16px; }
}
.care-top .chip[hidden] { display: none; }
.pick-c { text-align: left; align-items: flex-start; }

/* ============================================================================
   Each business in its own brand (MD, 2026-10-28: "use their respective brand
   colors, and texture too"). The page is neutral RPV until the customer picks;
   then body.brand-rp or body.brand-p4 re-dresses the whole chat. Hex values are
   exact from each brand's guide; nothing here borrows the other's colours.
     Renaissance Park — the RP brand kit (guidelines, 2026-11-05): the beige
       layout (Ivory ground, Shell panels, Sand dividers, Ink and Stone type,
       Gold rules) with Forest bands (Cloud type, Antique gold); Cormorant
       Garamond headlines, Montserrat for everything else; no texture.
     Vespera — light first, structured second, accented third: Warm White
       canvas, Navy at the edges, Blue for interaction, Gold <=10%; DM Serif
       Display + Plus Jakarta Sans; texture: the drawing sheet's fine grid.
   ========================================================================== */
@font-face { font-family: 'Cormorant Garamond'; src: url('fonts/CormorantGaramond-Variable.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Serif Display'; src: url('fonts/DMSerifDisplay-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('fonts/PlusJakartaSans-Variable.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  /* Renaissance Park: beige layout, Forest for the dark bands; gold follows its ground.
     Small type is Ink or Stone only (AA on Ivory and Shell); Gold is for rules and borders. */
  --rp-ivory: #F7F3EC; --rp-shell: #EEE7DC; --rp-sand: #E2D3BE; --rp-paper: #FDFBF7;
  --rp-ink: #3F3A34; --rp-stone: #6B6257; --rp-gold: #B88A4A;
  --rp-forest: #283726; --rp-pine: #43553F; --rp-cloud: #F1F0ED; --rp-agold: #AA8C5E; --rp-willow: #ABB09B;
  --rp-serif: 'Cormorant Garamond', Georgia, serif; --rp-sans: 'Montserrat', system-ui, sans-serif;
  /* Vespera */
  --v-navy: #081F5B; --v-blue: #2576D7; --v-gold: #FFC808; --v-green: #4A7C59; --v-white: #FFF9EF;
  --v-limestone: #E8E4D8; --v-sand: #D4CFC0; --v-interior: #F5F0E8;
  --v-serif: 'DM Serif Display', Georgia, serif; --v-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  /* the drawing sheet: thin grid lines (0.15 mm-ish), a heavier line every fifth */
  --v-grid: linear-gradient(rgba(37,118,215,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(37,118,215,.07) 1px, transparent 1px),
            linear-gradient(rgba(37,118,215,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(37,118,215,.035) 1px, transparent 1px);
}

/* ---- the two choice cards, each a small piece of its own brand ---- */
.pick-c.rp { background: var(--rp-ivory); border-color: var(--rp-sand); color: var(--rp-ink); font-family: var(--rp-sans); }
.pick-c.rp .bk { background: var(--rp-forest); color: var(--rp-agold); font-family: var(--rp-serif); font-weight: 500; letter-spacing: .04em; border: 1px solid var(--rp-agold); }
.pick-c.rp b { font-family: var(--rp-serif); font-weight: 500; font-size: 23px; letter-spacing: 0; color: var(--rp-ink); }
.pick-c.rp span:last-of-type { font-family: var(--rp-sans); color: var(--rp-stone); font-size: 13px; line-height: 1.55; }
.pick-c.rp:hover, .pick-c.rp.on { border-color: var(--rp-gold); background: var(--rp-ivory); box-shadow: 0 0 0 3px rgba(184,138,74,.2); }
.pick-c.p4 { background-color: var(--v-white); background-image: var(--v-grid); background-size: 16px 16px, 16px 16px, 4px 4px, 4px 4px; border-color: var(--v-limestone); color: var(--v-navy); border-top: 4px solid var(--v-navy); position: relative; }
.pick-c.p4::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.5px; background: var(--v-gold); }
.pick-c.p4 .bk { background: var(--v-navy); color: #fff; font-family: var(--v-sans); font-weight: 700; letter-spacing: .08em; }
.pick-c.p4 b { font-family: var(--v-serif); font-weight: 400; font-size: 21px; }
.pick-c.p4 span:last-of-type { font-family: var(--v-sans); color: #4A5878; font-size: 13px; }
.pick-c.p4:hover, .pick-c.p4.on { border-color: var(--v-blue); border-top-color: var(--v-navy); background-color: var(--v-white); box-shadow: 0 0 0 3px rgba(37,118,215,.18); }

/* ---- Renaissance Park, the whole chat ---- */
body.brand-rp { background: var(--rp-ivory); color: var(--rp-ink); font-family: var(--rp-sans); }
body.brand-rp .care-top { background: var(--rp-forest); border-bottom: 1px solid var(--rp-agold); color: var(--rp-cloud); }
body.brand-rp .care-top .brand { color: var(--rp-cloud); }
body.brand-rp .care-top .name { font-family: var(--rp-sans); font-weight: 500; text-transform: uppercase; letter-spacing: .24em; font-size: 12px; }
body.brand-rp .care-top .name small { display: block; font-family: var(--rp-sans); font-weight: 400; letter-spacing: .02em; text-transform: none; font-size: 12px; color: var(--rp-willow); margin-top: 3px; }
body.brand-rp .care-top .mark { background: transparent; color: var(--rp-agold); border: 1px solid var(--rp-agold); border-radius: 50%; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; font-family: var(--rp-serif); font-weight: 500; font-size: 15px; letter-spacing: 0; }
body.brand-rp .care-top .mark .dot { display: none; }
body.brand-rp .care-top .staff { color: var(--rp-willow); font-family: var(--rp-sans); font-weight: 500; text-transform: uppercase; letter-spacing: .2em; font-size: 10.5px; }
body.brand-rp .care-top .chip { background: rgba(241,240,237,.1); color: var(--rp-cloud); font-family: var(--rp-sans); letter-spacing: .16em; }
body.brand-rp .care-main { background: var(--rp-ivory); }
body.brand-rp .hello h1 { font-family: var(--rp-serif); font-weight: 500; color: var(--rp-ink); font-size: 42px; letter-spacing: 0; }
body.brand-rp .hello > p { color: var(--rp-stone); font-size: 15px; line-height: 1.6; }
body.brand-rp .hello .mark.big { background: var(--rp-forest); color: var(--rp-agold); font-family: var(--rp-serif); font-weight: 500; font-size: 22px; letter-spacing: 0; width: 64px; height: 64px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; border: 1px solid var(--rp-agold); }
body.brand-rp .msg-a .md { font-family: var(--rp-sans); font-size: 15.5px; line-height: 1.75; color: var(--rp-ink); }
body.brand-rp .msg-a .who { font-family: var(--rp-sans); font-weight: 600; text-transform: uppercase; letter-spacing: .2em; font-size: 10.5px; color: var(--rp-stone); }
body.brand-rp .msg-a .who b { font-weight: 600; }
body.brand-rp .av.us { background: var(--rp-forest); color: var(--rp-agold); font-family: var(--rp-serif); font-weight: 500; border: 1px solid var(--rp-agold); letter-spacing: 0; }
body.brand-rp .msg-u { background: var(--rp-shell); color: var(--rp-ink); border: 1px solid var(--rp-sand); font-family: var(--rp-sans); }
body.brand-rp .msg-u small, body.brand-rp .msg-a small, body.brand-rp .case, body.brand-rp .comp-foot { color: var(--rp-stone); font-family: var(--rp-sans); letter-spacing: .02em; }
body.brand-rp .case .bk { background: var(--rp-forest); color: var(--rp-agold); }
body.brand-rp .ev { background: transparent; color: var(--rp-stone); font-size: 13px; border-top: 1px solid rgba(184,138,74,.55); border-bottom: 1px solid rgba(184,138,74,.55); border-radius: 0; padding: 6px 18px; }
body.brand-rp .dots i { background: var(--rp-gold); }
body.brand-rp .care-composer { background: transparent; }
body.brand-rp .comp-row { background: var(--rp-paper); border-color: var(--rp-sand); box-shadow: 0 2px 10px rgba(63,58,52,.07); }
body.brand-rp .comp-row:focus-within { border-color: var(--rp-gold); }
body.brand-rp .comp-row textarea { font-family: var(--rp-sans); color: var(--rp-ink); font-size: 16px; }
body.brand-rp .comp-row textarea::placeholder { color: var(--rp-stone); }
body.brand-rp .iconbtn { color: var(--rp-stone); }
body.brand-rp .iconbtn:hover { background: var(--rp-shell); color: var(--rp-forest); }
body.brand-rp .iconbtn.send { background: var(--rp-forest); color: var(--rp-agold); }
body.brand-rp .iconbtn.send:hover { background: var(--rp-pine); color: var(--rp-cloud); }
body.brand-rp .keep { background: var(--rp-shell); border-bottom-color: var(--rp-gold); color: var(--rp-ink); }
body.brand-rp .keep .ghost { font-family: var(--rp-sans); font-weight: 600; text-transform: uppercase; letter-spacing: .18em; font-size: 10.5px; border-color: var(--rp-gold); color: var(--rp-forest); background: var(--rp-ivory); }
body.brand-rp .closedbar { background: var(--rp-shell); border-color: var(--rp-sand); color: var(--rp-stone); }
body.brand-rp .mine .pill { background: var(--rp-shell); border-color: var(--rp-sand); color: var(--rp-stone); }

/* ---- Vespera, the whole chat ---- */
body.brand-p4 { background: var(--v-white); color: var(--v-navy); font-family: var(--v-sans); }
body.brand-p4 .care-top { background: var(--v-navy); border-bottom: 0; box-shadow: inset 0 -1.5px 0 var(--v-gold); color: #fff; }
body.brand-p4 .care-top .brand { color: #fff; }
body.brand-p4 .care-top .name { font-family: var(--v-serif); font-weight: 400; font-size: 20px; letter-spacing: .05em; }
body.brand-p4 .care-top .name small { display: block; font-family: var(--v-sans); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }
body.brand-p4 .care-top .mark { background: transparent; border: 1.5px solid #fff; color: #fff; font-family: var(--v-serif); font-size: 16px; font-weight: 400; letter-spacing: 0; padding: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 3px; }
body.brand-p4 .care-top .mark .dot { display: none; }
body.brand-p4 .care-top .staff { color: rgba(255,255,255,.7); }
body.brand-p4 .care-top .chip { background: rgba(255,255,255,.12); color: #fff; }
body.brand-p4 .care-main { background-color: var(--v-white); background-image: var(--v-grid); background-size: 24px 24px, 24px 24px, 6px 6px, 6px 6px; }
body.brand-p4 .hello h1 { font-family: var(--v-serif); font-weight: 400; color: var(--v-navy); font-size: 38px; letter-spacing: 0; }
body.brand-p4 .hello > p { color: #4A5878; }
body.brand-p4 .hello .mark.big { background: var(--v-navy); color: #fff; font-family: var(--v-serif); font-weight: 400; font-size: 26px; letter-spacing: 0; width: 60px; height: 60px; padding: 0; border-radius: 4px; display: inline-grid; place-items: center; box-shadow: inset 0 -3px 0 var(--v-gold); }
body.brand-p4 .msg-a .md { font-family: var(--v-sans); color: var(--v-navy); font-size: 15.5px; line-height: 1.7; }
body.brand-p4 .msg-a .who { font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; color: var(--v-navy); }
body.brand-p4 .av.us { background: var(--v-navy); color: #fff; font-family: var(--v-serif); font-weight: 400; letter-spacing: 0; border-radius: 4px; box-shadow: inset 0 -2px 0 var(--v-gold); }
body.brand-p4 .msg-u { background: var(--v-limestone); color: var(--v-navy); }
body.brand-p4 .msg-u small, body.brand-p4 .msg-a small, body.brand-p4 .case, body.brand-p4 .comp-foot { color: #5A6684; }
body.brand-p4 .case .bk { background: var(--v-navy); }
body.brand-p4 .ev { background: var(--v-white); color: var(--v-navy); border: 1px solid var(--v-sand); border-left: 3px solid var(--v-gold); border-radius: 3px; }
body.brand-p4 .dots i { background: var(--v-blue); }
body.brand-p4 .care-composer { background: linear-gradient(transparent, var(--v-white) 30%); }
body.brand-p4 .comp-row { background: #fff; border-color: var(--v-sand); border-radius: 10px; box-shadow: 0 2px 10px rgba(8,31,91,.07); }
body.brand-p4 .comp-row:focus-within { border-color: var(--v-blue); box-shadow: 0 0 0 3px rgba(37,118,215,.14); }
body.brand-p4 .comp-row textarea { font-family: var(--v-sans); color: var(--v-navy); }
body.brand-p4 .comp-row textarea::placeholder { color: #6A7590; }
body.brand-p4 .iconbtn { color: var(--v-navy); }
body.brand-p4 .iconbtn:hover { background: var(--v-interior); }
body.brand-p4 .iconbtn.send { background: var(--v-navy); color: var(--v-gold); border-radius: 8px; }
body.brand-p4 .iconbtn.send:hover { background: var(--v-blue); color: #fff; }
body.brand-p4 .keep { background: #fff; border-bottom: 1.5px solid var(--v-gold); color: var(--v-navy); }
body.brand-p4 .keep .ghost { border-color: var(--v-navy); color: var(--v-navy); border-radius: 6px; }
body.brand-p4 .closedbar { background: var(--v-interior); border-color: var(--v-sand); color: var(--v-navy); }
body.brand-p4 .mine .pill { background: #fff; border-color: var(--v-sand); color: var(--v-navy); }
body.brand-rp .toast, body.brand-p4 .toast { font-family: inherit; }
body.brand-rp .toast:not(.bad) { background: var(--rp-forest); border-left-color: var(--rp-agold); }
body.brand-p4 .toast:not(.bad) { background: var(--v-navy); border-left-color: var(--v-gold); }
@media (max-width: 720px) {
  body.brand-rp .hello h1, body.brand-p4 .hello h1 { font-size: 28px; }
  body.care .care-top .name small { display: none; }
  body.brand-rp .care-top .name { letter-spacing: .16em; font-size: 11px; }
  body.brand-p4 .care-top .name { font-size: 18px; }
  .care-top .chip { font-size: 10px; padding: 2px 6px; margin-left: auto; }
}

/* a business pressed: its chat opens at once, with a way back to the choice */
.pick-c .go { font-style: normal; font-size: 12.5px; font-weight: 600; margin-top: 6px; opacity: .75; transition: opacity var(--ease), transform var(--ease); }
.pick-c:hover .go, .pick-c:focus-visible .go { opacity: 1; transform: translateX(3px); }
.pick-c.rp .go { font-family: var(--rp-sans); font-weight: 600; text-transform: uppercase; letter-spacing: .18em; font-size: 10.5px; color: var(--rp-stone); }
.pick-c.p4 .go { font-family: var(--v-sans); color: var(--v-blue); }
.pick-c:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; }
.case .swap { font: inherit; background: none; border: 0; padding: 0 0 0 4px; color: inherit; text-decoration: underline; cursor: pointer; opacity: .8; }
.case .swap:hover { opacity: 1; }

/* ---- the logos in place of the letters (MD, 2026-10-29) ---- */
.logo img { display: block; }
.bk.logo, .av.us.logo { padding: 0; letter-spacing: 0; font-size: 0; line-height: 0; }
/* Renaissance Park: the RPC Gold wordmark on Forest (the kit's rule for the gold version) */
.bk.logo.rp { background: var(--rp-forest); border: 1px solid var(--rp-agold); border-radius: 6px; padding: 9px 12px; }
.bk.logo.rp img { height: 22px; width: auto; }
.pick-c.rp .bk.logo img { height: 26px; }
.case .bk.logo.rp { padding: 4px 8px; } .case .bk.logo.rp img { height: 12px; }
body.brand-rp .av.us.logo { width: auto; height: 24px; border-radius: 6px; padding: 0 7px; display: inline-flex; align-items: center; background: var(--rp-forest); border: 1px solid var(--rp-agold); }
body.brand-rp .av.us.logo img { height: 11px; width: auto; }
body.brand-rp .care-top .mark { width: auto; height: auto; border-radius: 6px; padding: 6px 10px; border: 1px solid var(--rp-agold); background: rgba(0,0,0,.18); }
body.brand-rp .care-top .mark img { height: 18px; width: auto; display: block; }
body.brand-rp .hello .mark.big { width: auto; height: auto; border-radius: 8px; padding: 12px 18px; }
body.brand-rp .hello .mark.big img { height: 32px; width: auto; display: block; }
/* Vespera: the V tile */
.bk.logo.p4 { background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid var(--v-limestone); }
.bk.logo.p4 img { width: 44px; height: 44px; }
.case .bk.logo.p4 { border-radius: 5px; } .case .bk.logo.p4 img { width: 20px; height: 20px; }
body.brand-p4 .av.us.logo { background: #fff; border-radius: 6px; box-shadow: 0 0 0 1px var(--v-limestone); overflow: hidden; }
body.brand-p4 .av.us.logo img { width: 24px; height: 24px; }
body.brand-p4 .care-top .mark { background: #fff; border: 0; border-radius: 6px; overflow: hidden; }
body.brand-p4 .care-top .mark img { width: 32px; height: 32px; display: block; }
body.brand-p4 .hello .mark.big { background: #fff; width: 60px; height: 60px; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px var(--v-limestone); }
body.brand-p4 .hello .mark.big img { width: 60px; height: 60px; display: block; }