/* iPhone-style call screen and a more distinct Hotel brief (October 6, 2026).
   Loaded last; the design before it is kept in docs/design-reference/before-iphone-call-2026-10-06/. */

/* ── Call screen: a contact poster behind glass controls ── */
.scr--call{
  --call-green:#34c759;--call-red:#ff3b30;--call-mint:#9ef0c4;--call-text:rgba(232,246,240,.74);
  --call-glass:rgba(255,255,255,.12);--call-line:rgba(255,255,255,.16);
  overflow:hidden;
  background:
    radial-gradient(65% 40% at 50% 23%,rgba(66,211,146,.42),rgba(66,211,146,0) 72%),
    radial-gradient(60% 42% at -5% 6%,rgba(45,170,220,.26),rgba(45,170,220,0) 70%),
    radial-gradient(60% 50% at 108% 58%,rgba(124,92,255,.18),rgba(124,92,255,0) 70%),
    radial-gradient(80% 45% at 50% 108%,rgba(198,243,107,.2),rgba(198,243,107,0) 70%),
    linear-gradient(180deg,#0f3d38 0%,#09292a 48%,#04110f 100%);
}
.scr--call::before{content:"";position:absolute;inset:-25%;z-index:0;pointer-events:none;background:radial-gradient(30% 22% at 30% 30%,rgba(80,230,170,.34),rgba(80,230,170,0) 70%),radial-gradient(28% 24% at 72% 44%,rgba(70,160,255,.2),rgba(70,160,255,0) 70%),radial-gradient(34% 26% at 46% 78%,rgba(190,240,110,.15),rgba(190,240,110,0) 70%);filter:blur(2em);animation:call-aurora 22s ease-in-out infinite alternate;will-change:transform}
.scr--call:not(.is-on)::before{animation-play-state:paused}
.scr--call::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.scr--call>*{position:relative;z-index:1}

/* Who is on the line */
.scr--call .call__who{flex:1 1 auto;justify-content:center;min-height:0;padding:3.6em 1.3em 1em;gap:.3em}
.scr--call .call__badge{display:inline-flex;align-items:center;gap:.6em;margin:0 0 2.1em;padding:.55em 1em .55em .85em;border:1px solid var(--call-line);border-radius:999px;background:var(--call-glass);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);color:#dff5ec;font-size:.56em;font-weight:600;letter-spacing:.16em;line-height:1;text-transform:uppercase}
.scr--call .call__badge::before{content:"";flex:none;width:.7em;height:.7em;border-radius:50%;background:var(--call-green);box-shadow:0 0 0 .25em rgba(52,199,89,.22),0 0 .8em rgba(52,199,89,.8)}
.scr--call .call__avatar{position:relative;overflow:visible;width:6.2em;height:6.2em;margin:0 0 1.15em;font-size:1em;border:0;border-radius:50%;color:#f4fffa;background:radial-gradient(circle at 34% 24%,rgba(255,255,255,.62),rgba(255,255,255,0) 36%),radial-gradient(circle at 50% 62%,#46d79c 0%,#1aa36f 52%,#0d5f47 100%);box-shadow:inset 0 -.6em 1.2em rgba(4,40,30,.45),inset 0 .12em .3em rgba(255,255,255,.55),0 1.4em 2.8em -1.1em rgba(28,190,120,.85),0 0 0 .07em rgba(255,255,255,.25);animation:none}
.scr--call .call__avatar::before,.scr--call .call__avatar::after{content:"";position:absolute;inset:0;border:1px solid rgba(152,240,200,.3);border-radius:50%;pointer-events:none;opacity:0}
.scr--call[data-state="pick"] .call__avatar::before{inset:-.75em;opacity:1;border-color:rgba(152,240,200,.2)}
.scr--call[data-state="pick"] .call__avatar::after{inset:-1.45em;opacity:1;border-color:rgba(152,240,200,.09)}
.scr--call[data-state="connecting"] .call__avatar::before,.scr--call[data-state="ringing"] .call__avatar::before{animation:call-ripple 2s cubic-bezier(.2,.6,.3,1) infinite}
.scr--call[data-state="connecting"] .call__avatar::after,.scr--call[data-state="ringing"] .call__avatar::after{animation:call-ripple 2s cubic-bezier(.2,.6,.3,1) 1s infinite}
.call__bars{display:flex;align-items:center;gap:.3em;height:2.4em}
.call__bars i{--h:.62em;display:block;width:.32em;height:var(--h);border-radius:.2em;background:currentColor;box-shadow:0 .05em .2em rgba(0,40,25,.3)}
.call__bars i:nth-child(2),.call__bars i:nth-child(4){--h:1.45em}
.call__bars i:nth-child(3){--h:2.25em}
.scr--call[data-state="connecting"] .call__bars i{animation:call-bars 1.4s ease-in-out infinite}
.scr--call[data-state="live"][data-speaking="true"] .call__bars i{animation:call-bars .8s ease-in-out infinite}
.call__bars i:nth-child(2){animation-delay:-.2s}
.call__bars i:nth-child(3){animation-delay:-.4s}
.call__bars i:nth-child(4){animation-delay:-.6s}
.call__bars i:nth-child(5){animation-delay:-.8s}
.scr--call .call__name{font-size:2.75em;font-weight:650;letter-spacing:-.04em;line-height:1.04;color:#fff;text-shadow:0 .1em .8em rgba(0,0,0,.18)}
.scr--call .call__sub{max-width:92%;font-size:.86em;line-height:1.4;opacity:1;color:var(--call-text);text-wrap:balance}
.scr--call .call__status{min-height:1.35em;margin-top:.15em;font-size:.78em;line-height:1.35;letter-spacing:.01em;color:var(--call-mint);font-variant-numeric:tabular-nums;text-wrap:balance}
.scr--call .call__panel{padding:0 1.15em 2.3em}

/* Pick: voice as a segmented control, then two round call buttons */
.scr--call .call__pick{gap:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.scr--call .voice-picker{gap:0;margin:0 0 1.55em;padding:0}
.scr--call .voice-picker legend{width:100%;padding:0 0 .85em;font-size:.58em;font-weight:600;letter-spacing:.14em;text-align:center;text-transform:uppercase;color:rgba(222,242,234,.62)}
.scr--call .voice-picker label{padding:.22em;background:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.scr--call .voice-picker label:first-of-type{padding-right:.11em;border-radius:1.15em 0 0 1.15em}
.scr--call .voice-picker label:last-of-type{padding-left:.11em;border-radius:0 1.15em 1.15em 0}
.scr--call .voice-picker label>span{height:100%;padding:.55em .6em .6em;border:0;border-radius:.93em;background:transparent;text-align:center;transition:background-color .25s ease,box-shadow .25s ease}
.scr--call .voice-picker b{font-size:.84em;font-weight:600;color:#fff}
.scr--call .voice-picker small{margin-top:.15em;font-size:.6em;color:rgba(222,242,234,.6)}
.scr--call .voice-picker input:checked+span{background:linear-gradient(180deg,#fff,#edf7f1);box-shadow:0 .25em .7em -.3em rgba(0,0,0,.45),inset 0 -1px 0 rgba(0,0,0,.06)}
.scr--call .voice-picker input:checked+span b{color:#0b2a24}
.scr--call .voice-picker input:checked+span small{color:#4f6f65}
.scr--call .voice-picker input:focus-visible+span{outline:2px solid var(--call-mint);outline-offset:2px}
.scr--call .voice-picker[disabled]{opacity:.55}
.call__actions{display:grid;grid-template-columns:1fr 1fr;gap:.5em;align-items:start}
.scr--call .call__pick .callbtn{display:flex;flex-direction:column;align-items:center;gap:.62em;width:100%;padding:.2em .1em;border:0;border-radius:1em;background:none;box-shadow:none;color:#fff;text-align:center;translate:none}
.callbtn__icon{position:relative;display:grid;place-items:center;width:4.35em;height:4.35em;border-radius:50%;transition:transform .2s ease,filter .2s ease}
.scr--call .callbtn__icon svg{width:1.75em;height:1.75em;fill:currentColor}
.callbtn--talk .callbtn__icon{color:#fff;background:radial-gradient(circle at 35% 22%,#7af0a0 0%,#34c759 46%,#22a046 100%);box-shadow:inset 0 .12em .25em rgba(255,255,255,.55),inset 0 -.3em .6em rgba(0,70,20,.3),0 1em 1.9em -.85em rgba(52,199,89,.95)}
.callbtn--talk .callbtn__icon::after{content:"";position:absolute;inset:0;border-radius:50%;animation:call-invite 2.4s cubic-bezier(.2,.7,.3,1) infinite}
.callbtn--ring .callbtn__icon{color:#fff;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 .9em 1.8em -1em rgba(0,0,0,.6)}
.callbtn__text{display:grid;justify-items:center;gap:.2em}
.scr--call .call__pick .callbtn b{font-size:.8em;font-weight:600;line-height:1.25;text-wrap:balance}
.scr--call .call__pick .callbtn small{margin:0;font-size:.6em;line-height:1.35;opacity:1;color:rgba(222,242,234,.66);text-wrap:balance}
.scr--call .call__pick .callbtn:focus-visible{outline:0}
.scr--call .call__pick .callbtn:focus-visible .callbtn__icon{outline:2px solid var(--call-mint);outline-offset:4px}
.scr--call .call__pick .callbtn:active .callbtn__icon{transform:scale(.95)}
.scr--call .call__pick .callbtn[disabled]{opacity:1;cursor:progress}
.scr--call[data-state="connecting"] .callbtn--talk .callbtn__icon::after{inset:-.32em;border:.16em solid transparent;border-top-color:var(--call-mint);border-right-color:rgba(158,240,196,.4);animation:call-spin .9s linear infinite}
.scr--call[data-state="connecting"] .callbtn--ring{opacity:.35}

/* Live: transcript bubbles and the iPhone call controls */
.scr--call[data-state="live"] .call__who{flex:none;padding-top:3.6em;gap:.2em}
.scr--call[data-state="live"] .call__badge{margin-bottom:1em}
.scr--call[data-state="live"] .call__avatar{width:4.6em;height:4.6em;margin-bottom:.75em;animation:none}
.scr--call[data-state="live"] .call__bars{font-size:.78em}
.scr--call[data-state="live"] .call__avatar::before{inset:-.5em;opacity:1;border:0;background:radial-gradient(circle,rgba(52,199,89,0) 52%,rgba(52,199,89,.34) 70%,rgba(52,199,89,0) 100%);transform:scale(calc(1 + var(--vol,0) * .45));transition:transform .12s linear}
.scr--call[data-state="live"][data-speaking="true"] .call__avatar::after{opacity:1;animation:call-ripple 1.6s ease-out infinite}
.scr--call[data-state="live"] .call__name{font-size:2.15em}
.scr--call[data-state="live"] .call__status{font-size:.86em;font-weight:500;color:#e9fff3}
.scr--call .call__captions{gap:.5em;padding:.4em 1.05em .9em;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 2.4em);mask-image:linear-gradient(180deg,transparent 0,#000 2.4em)}
.scr--call .cap{max-width:88%;align-self:flex-start;padding:.6em .85em .68em;border:1px solid rgba(255,255,255,.1);border-radius:1.2em 1.2em 1.2em .4em;background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 .5em 1.2em -.8em rgba(0,0,0,.5);color:#f3fbf7;font-size:.74em;line-height:1.42;opacity:1;animation:cap-in .35s cubic-bezier(.2,.8,.3,1) both}
.scr--call .cap.you{align-self:flex-end;border-color:rgba(140,240,170,.28);border-radius:1.2em 1.2em .4em 1.2em;background:linear-gradient(180deg,rgba(52,199,89,.44),rgba(40,170,80,.36))}
.scr--call .cap b{display:block;margin:0 0 .18em;font-size:.76em;font-weight:600;letter-spacing:.02em;color:var(--call-mint)}
.scr--call .cap.you b{color:#e3ffe9;text-align:right}
.scr--call[data-state="live"] .call__live{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;align-items:start;gap:0 2em;padding-top:.5em}
.scr--call .call__grid{display:contents}
.scr--call #mute{order:1}
.scr--call .call__end{order:2}
.scr--call .call__grid>span.callkey{order:3}
.scr--call .callkey{display:flex;flex-direction:column;align-items:center;gap:.55em;padding:0;border:0;background:none;color:rgba(240,250,246,.88);font:inherit;font-size:.66em;font-weight:500;opacity:1;cursor:pointer}
.scr--call span.callkey{cursor:default}
.scr--call .callkey>span{display:grid;place-items:center;width:calc(4em / .66);height:calc(4em / .66);border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 .8em 1.6em -1em rgba(0,0,0,.6);transition:background-color .2s ease,transform .15s ease}
.scr--call .callkey svg{width:2.1em;height:2.1em;fill:#fff}
.scr--call .callkey.is-on>span{border-color:#fff;background:#fff}
.scr--call .callkey.is-on svg{fill:#0b2a24}
.scr--call .callkey:active>span{transform:scale(.94)}
.scr--call .callkey:focus-visible{outline:0}
.scr--call .callkey:focus-visible>span{outline:2px solid var(--call-mint);outline-offset:3px}
.scr--call .call__end{position:relative;font:inherit;width:4em;height:4em;border:0;border-radius:50%;background:radial-gradient(circle at 35% 25%,#ff6a61,#ff3b30 55%,#d92c22);box-shadow:inset 0 .1em .2em rgba(255,255,255,.4),0 .9em 1.8em -.8em rgba(255,59,48,.95);transition:transform .15s ease,filter .2s ease}
.scr--call .call__end::after{content:"end";position:absolute;top:100%;left:50%;margin-top:.72em;translate:-50% 0;color:rgba(240,250,246,.88);font-size:.66em;font-weight:500;line-height:1.2;pointer-events:none}
.scr--call .call__end svg{width:1.75em;height:1.75em;fill:#fff;transform:rotate(135deg)}
.scr--call .call__end:active{transform:scale(.94)}

/* The two forms: grouped glass fields, like iPhone settings */
.scr--call[data-state="form"] .call__form--talk{display:none}
.scr--call[data-state="details"] .call__form--talk{display:flex}
.scr--call[data-state="details"] .call__captions,.scr--call[data-state="details"] .call__status{display:none}
.scr--call[data-state="form"] .call__who,.scr--call[data-state="details"] .call__who{flex:none;padding:3.5em 1em .6em;gap:.1em}
.scr--call[data-state="form"] .call__badge,.scr--call[data-state="details"] .call__badge{display:none}
.scr--call[data-state="form"] .call__avatar,.scr--call[data-state="details"] .call__avatar{width:2.9em;height:2.9em;margin:0 0 .45em}
.scr--call[data-state="form"] .call__bars,.scr--call[data-state="details"] .call__bars{font-size:.46em}
.scr--call[data-state="form"] .call__name,.scr--call[data-state="details"] .call__name{font-size:1.3em;letter-spacing:-.02em}
.scr--call[data-state="form"] .call__sub,.scr--call[data-state="details"] .call__sub{font-size:.74em}
.scr--call[data-state="form"] .call__panel,.scr--call[data-state="details"] .call__panel{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none}
.scr--call .call__form{gap:.62em;padding-top:.2em}
.scr--call .call__form h3{margin:.1em 0 0;font-size:1.18em;font-weight:650;letter-spacing:-.025em;text-align:center}
.call__lead{margin:-.25em 0 .25em;font-size:.72em;line-height:1.45;text-align:center;color:var(--call-text);text-wrap:balance}
.call__fields{display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:1.05em;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.scr--call .call__fields input[type=text],.scr--call .call__fields input[type=email],.scr--call .call__fields input[type=tel]{width:100%;min-width:0;padding:.78em 1em;border:0;border-radius:0;background-color:transparent;color:#fff;font:inherit;font-size:.86em;outline:0;transition:background-color .2s ease}
.scr--call .call__fields>label:not(:first-child)+input,.scr--call .call__fields>.call__tel{background-image:linear-gradient(rgba(255,255,255,.13),rgba(255,255,255,.13));background-repeat:no-repeat;background-position:1em 0;background-size:calc(100% - 1em) 1px}
.scr--call .call__fields input:focus{background-color:rgba(255,255,255,.07)}
.scr--call .call__fields input:focus-visible{box-shadow:inset .2em 0 0 var(--call-mint)}
.scr--call .call__form input::placeholder{color:rgba(232,246,240,.45)}
.scr--call .call__fields .call__tel{display:flex;align-items:center;gap:0}
.scr--call .call__tel span{flex:none;padding:0 .1em 0 1.15em;border:0;border-radius:0;background:none;font-size:.86em;color:rgba(240,250,246,.82)}
.scr--call .call__tel input{flex:1 1 auto}
.scr--call .call__consent{display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:.8em;padding:.7em .8em .7em 1em;border:1px solid rgba(255,255,255,.14);border-radius:1.05em;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);color:rgba(240,250,246,.9);font-size:.7em;line-height:1.4;opacity:1;cursor:pointer}
.scr--call .call__consent input{flex:none;width:3.6em;height:2.2em;margin:0;border-radius:2em;-webkit-appearance:none;appearance:none;background-color:rgba(120,120,128,.36);background-image:radial-gradient(circle at center,#fff 0 .84em,rgba(255,255,255,0) .88em),radial-gradient(circle at center,rgba(0,0,0,.2) 0 .92em,rgba(0,0,0,0) 1em);background-repeat:no-repeat;background-size:2.2em 2.2em;background-position:0 0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);cursor:pointer;transition:background-color .25s ease,background-position .25s cubic-bezier(.3,.7,.3,1)}
.scr--call .call__consent input:checked{background-color:var(--call-green);background-position:100% 0}
.scr--call .call__consent input:focus-visible{outline:2px solid var(--call-mint);outline-offset:2px}
.scr--call .call__error{min-height:1.1em;margin:0;font-size:.7em;color:#ffb4a8;text-align:center}
.scr--call .call__form .callbtn{display:flex;justify-content:center;align-items:center;gap:.55em;width:100%;padding:.92em 1em;border:0;border-radius:999px;background:linear-gradient(180deg,#4fdc72 0%,#2fbf55 100%);color:#fff;text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 .9em 1.8em -1em rgba(52,199,89,.95)}
.scr--call .call__form .callbtn b{font-size:.92em;font-weight:600}
.scr--call .call__form .callbtn svg{width:1.15em;height:1.15em;fill:currentColor}
.scr--call .call__form .callbtn[disabled]{opacity:.65}
.call__notice{margin:0;font-size:.6em;line-height:1.45;text-align:center;color:rgba(226,243,236,.6)}
.call__notice a{color:#dff7ec;text-underline-offset:2px}
.scr--call .call__formfoot{gap:.6em;font-size:.68em;opacity:1;color:rgba(226,243,236,.62)}
.scr--call .call__formfoot .link{color:#fff;text-decoration-color:rgba(255,255,255,.4)}

/* Ringing and ended */
.scr--call .call__ringing,.scr--call .call__ended{gap:.6em;padding-bottom:.4em}
.scr--call .call__ringing b,.scr--call .call__ended b{font-size:1.12em;font-weight:650;letter-spacing:-.02em}
.scr--call .call__ringing p,.scr--call .call__ended p{max-width:20em;margin:0;font-size:.76em;line-height:1.45;opacity:1;color:var(--call-text)}
.scr--call[data-state="ended"] .call__avatar{filter:saturate(.4) brightness(.92)}
.scr--call .call__ended .callbtn{display:flex;justify-content:center;width:100%;margin-top:.5em;padding:.95em 1em;border:0;border-radius:999px;background:#fff;color:#0b2a24;text-align:center;box-shadow:0 .9em 1.8em -1em rgba(0,0,0,.6)}
.scr--call .call__ended .callbtn b{font-size:.92em;font-weight:650}
.scr--call .call__ended .link{display:flex;justify-content:center;width:100%;padding:.85em 1em;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:.86em;font-weight:600;text-decoration:none}

@media(hover:hover) and (pointer:fine){
  .scr--call .call__pick .callbtn:not([disabled]):hover{translate:none;box-shadow:none}
  .scr--call .call__pick .callbtn:not([disabled]):hover .callbtn__icon{transform:translateY(-2px) scale(1.04);filter:brightness(1.08)}
  .scr--call .voice-picker label:hover input:not(:checked)+span{background:rgba(255,255,255,.07)}
  .scr--call .callkey:hover>span{background:rgba(255,255,255,.22)}
  .scr--call .callkey.is-on:hover>span{background:#fff}
  .scr--call .call__end:hover,.scr--call .call__form .callbtn:not([disabled]):hover{filter:brightness(1.07)}
  .scr--call .call__ended .callbtn:hover{background:#eefaf3}
  .scr--call .call__ended .link:hover{background:rgba(255,255,255,.18)}
}
/* Touch screens zoom into inputs under 16px; keep them at 16px there. */
@media(pointer:coarse){.scr--call .call__fields input[type=text],.scr--call .call__fields input[type=email],.scr--call .call__fields input[type=tel]{font-size:16px}}
@keyframes call-aurora{0%{transform:translate3d(-4%,-3%,0) rotate(0) scale(1)}50%{transform:translate3d(5%,4%,0) rotate(8deg) scale(1.08)}100%{transform:translate3d(-2%,6%,0) rotate(-6deg) scale(1.02)}}
@keyframes call-ripple{from{transform:scale(1);opacity:.75}to{transform:scale(1.9);opacity:0}}
@keyframes call-bars{0%,100%{height:calc(var(--h) * .42)}50%{height:var(--h)}}
@keyframes call-invite{0%{box-shadow:0 0 0 0 rgba(52,199,89,.5)}70%,100%{box-shadow:0 0 0 .9em rgba(52,199,89,0)}}
@keyframes call-spin{to{transform:rotate(360deg)}}
@keyframes cap-in{from{opacity:0;transform:translateY(.5em) scale(.98)}}
@media(prefers-reduced-motion:reduce){
  .scr--call::before,.callbtn__icon::after,.scr--call .call__avatar::before,.scr--call .call__avatar::after,.call__bars i,.scr--call .cap{animation:none!important}
}

/* ── Hotel brief: the same layout, with a dark header band and clearer cards ── */
.hotel-brief{border-color:rgba(255,255,255,.55);background:#eef4f1;box-shadow:0 30px 70px -24px rgba(0,0,0,.55)}
.hotel-brief__hero{position:relative;flex:none;overflow:hidden;padding:0 0 18px;border-radius:23px 23px 0 0;color:#fff;background:radial-gradient(120% 140% at 0% 0%,rgba(70,215,156,.36),rgba(70,215,156,0) 55%),radial-gradient(90% 120% at 100% 0%,rgba(120,150,255,.22),rgba(120,150,255,0) 60%),linear-gradient(160deg,#114139 0%,#0a2a2b 100%)}
.hotel-brief__hero::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,rgba(198,243,107,0),rgba(198,243,107,.55),rgba(70,215,156,0))}
.hotel-brief__header p{color:#9fe3c3}
.hotel-brief__header h3{color:#fff}
.hotel-brief__header button{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:#fff;transition:background-color .2s ease}
.hotel-brief__header button:hover{background:rgba(255,255,255,.22)}
.hotel-brief__header button:focus-visible{outline-color:#c6f36b}
.hotel-brief .learned__head b{color:#fff}
.hotel-brief .learned__head small{color:rgba(225,244,236,.72)}
.hotel-brief .learned__head .avatar{width:38px;height:38px;box-shadow:0 0 0 3px rgba(198,243,107,.28)}
.hotel-brief .learned__score{margin:0 22px;padding:12px 14px 14px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.08);color:rgba(235,248,242,.86);font-size:12px;line-height:1.4}
.hotel-brief .learned__score b{margin-right:2px;color:#c6f36b;font-size:19px;font-weight:700;letter-spacing:-.02em}
.hotel-brief .learned__score::after{content:"";display:block;height:6px;margin-top:10px;border-radius:6px;background:linear-gradient(90deg,#c6f36b,#46d79c) 0 0/calc(var(--found,0) * 100%) 100% no-repeat,rgba(255,255,255,.14)}
.hotel-brief__body{padding-top:18px;background:#eef4f1;scrollbar-color:#a9c4b2 transparent}
.brief-demo-features{padding:16px;border:1px solid #dbe7e0;border-radius:16px;background:#fff;box-shadow:0 12px 26px -20px rgba(11,37,51,.45)}
.brief-demo-features[data-mode="off"]{border-color:#f0dfbf;background:linear-gradient(180deg,#fff7e8 0%,#fff 70%)}
.brief-demo-features[data-mode="example"]{border-color:#bfe5cc;background:linear-gradient(180deg,#e8f9ee 0%,#fff 70%)}
.brief-demo-features h4{color:#2f6b4c}
.brief-demo-features[data-mode="off"] h4{color:#93621a}
.brief-demo-features li{padding:9px 10px;border:1px solid rgba(11,37,51,.06);border-radius:10px;background:rgba(255,255,255,.85)}
.brief-demo-features svg{width:20px;height:20px;padding:4px;border-radius:50%;background:#e2f5e9;color:#2f8a57}
.brief-demo-features[data-mode="off"] svg{background:#fbecd2;color:#b7791f}
.brief-demo-features small{padding:3px 8px;border-radius:999px;background:#e2f5e9;color:#24734a;font-weight:600}
.brief-demo-features[data-mode="off"] small{background:#fbecd2;color:#93621a}
.brief-demo-features p{color:#5f766b}
.brief-demo-features button{border-color:#1d6a47;background:linear-gradient(180deg,#22774f,#195a3c);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 18px -10px rgba(25,90,60,.8)}
.brief-demo-features button:hover{background:linear-gradient(180deg,#1f6d48,#154c33)}
.brief-demo-features button[aria-pressed="true"]{border-color:#b9cebc;background:#fff;color:#1d5a3c;box-shadow:none}
#brief-booking-feedback{padding:8px 10px;border-radius:8px;background:#eef5ff;color:#1f4f7a}
.brief-facts summary{margin-top:18px;padding:12px 14px;border:1px solid #dbe7e0;border-radius:12px;background:#fff;box-shadow:0 8px 20px -18px rgba(11,37,51,.5);color:var(--ink)}
.brief-facts summary span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#e2f0e8;color:#2f6b4c;transition:transform .2s ease}
.brief-section h4{color:#2f6b4c}
.brief-section h4 span{padding:3px 8px;border-radius:999px;background:#2f8a57;color:#fff}
.brief-section--missing h4{color:#93621a}
.brief-section--missing h4 span{background:#d0952a;color:#fff}
.hotel-brief .learned__list li{border:1px solid #e0eae4;border-left:3px solid #3fae6c;border-radius:12px;background:#fff;box-shadow:0 6px 16px -14px rgba(11,37,51,.45)}
.hotel-brief .learned__list li.no{border-left-color:#e0a63a}
.hotel-brief .learned__list li svg{width:18px;height:18px;margin-top:0;padding:3px;border-radius:50%}
.hotel-brief .learned__list li.yes svg{background:#e2f5e9;color:#2f8a57}
.hotel-brief .learned__list li.no svg{background:#fbecd2;color:#b7791f}
.hotel-brief .learned__list li>div>span{font-weight:600;color:var(--ink)}
.brief-section>p{color:#5f766b}
@media(max-width:899px){
  .hotel-brief__hero{padding-bottom:14px}
  .hotel-brief .learned__score{margin:0 18px}
  .hotel-brief__body{padding-top:14px}
}
.brief-facts summary span{font-size:0}
.brief-facts summary span::before{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.8px 1.8px 0;transform:translateY(-1.5px) rotate(45deg)}
.callbtn__left{justify-self:center;margin-top:.35em;padding:.3em .7em;border:1px solid rgba(158,240,196,.28);border-radius:999px;background:rgba(158,240,196,.12);color:#c9f7df;font-size:.56em;font-weight:600;letter-spacing:.02em;line-height:1.2;white-space:nowrap}
.callbtn__left[data-low="true"]{border-color:rgba(255,196,120,.4);background:rgba(255,196,120,.14);color:#ffd9a8}

/* Phone demo: a hang-up button while it rings and while it's live, with captions like a browser call */
.call__phone{display:none}
.scr--call[data-state="ringing"] .call__phone,.scr--call[data-state="phone"] .call__phone{display:flex;justify-content:center;padding:.8em 0 1.5em}
.scr--call[data-state="phone"] .call__who{flex:none;padding-top:3.6em;gap:.2em}
.scr--call[data-state="phone"] .call__badge{margin-bottom:1em}
.scr--call[data-state="phone"] .call__avatar{width:4.6em;height:4.6em;margin-bottom:.75em}
.scr--call[data-state="phone"] .call__bars{font-size:.78em}
.scr--call[data-state="phone"] .call__bars i{animation:call-bars 1.6s ease-in-out infinite}
.scr--call[data-state="phone"] .call__avatar::before{inset:-.5em;opacity:1;border:0;background:radial-gradient(circle,rgba(52,199,89,0) 52%,rgba(52,199,89,.34) 70%,rgba(52,199,89,0) 100%)}
.scr--call[data-state="phone"] .call__name{font-size:2.15em}
.scr--call[data-state="phone"] .call__status{font-size:.86em;font-weight:500;color:#e9fff3}
.scr--call[data-state="phone"] .call__status:not(:empty)::before{content:"On your phone · "}
.scr--call .call__phone .call__end[disabled]{opacity:.6;cursor:progress}
@media(prefers-reduced-motion:reduce){.scr--call[data-state="phone"] .call__bars i{animation:none}}

/* After a refresh: the browser call is still on; one tap rejoins it */
.call__resume{display:none}
.scr--call[data-state="resume"] .call__phone{display:flex;justify-content:center;gap:2.4em;padding:.8em 0 1.5em}
.scr--call[data-state="resume"] .call__resume{position:relative;display:grid;place-items:center;width:4em;height:4em;padding:0;border:0;border-radius:50%;font:inherit;color:#fff;cursor:pointer;background:radial-gradient(circle at 35% 22%,#7af0a0 0%,#34c759 46%,#22a046 100%);box-shadow:inset 0 .12em .25em rgba(255,255,255,.55),0 1em 1.9em -.85em rgba(52,199,89,.95);animation:call-invite 2.4s cubic-bezier(.2,.7,.3,1) infinite}
.scr--call .call__resume svg{width:1.6em;height:1.6em;fill:currentColor}
.scr--call .call__resume::after{content:"resume";position:absolute;top:100%;left:50%;margin-top:.72em;translate:-50% 0;color:rgba(240,250,246,.88);font-size:.66em;font-weight:500;line-height:1.2}
.scr--call .call__resume:focus-visible{outline:2px solid var(--call-mint);outline-offset:4px}
.scr--call .call__resume[disabled]{opacity:.6;cursor:progress;animation:none}
.scr--call[data-state="resume"] .call__who{flex:none;padding-top:3.6em;gap:.2em}
.scr--call[data-state="resume"] .call__badge{margin-bottom:1em}
.scr--call[data-state="resume"] .call__avatar{width:4.6em;height:4.6em;margin-bottom:.75em}
.scr--call[data-state="resume"] .call__bars{font-size:.78em}
.scr--call[data-state="resume"] .call__name{font-size:2.15em}
.scr--call[data-state="resume"] .call__status{font-size:.8em;color:#e9fff3}
@media(prefers-reduced-motion:reduce){.scr--call .call__resume{animation:none}}
.scr--call .cap.is-live span{opacity:.8}

/* iPhone Safari stops clipping a rounded, overflow-hidden box once a child uses
   filter/backdrop-filter, so the call screen spilled past the phone's corners.
   A mask makes Safari clip to the rounded corners; the screen also rounds itself. */
.screen{-webkit-mask-image:-webkit-radial-gradient(white,black);mask-image:radial-gradient(white,black)}
.scr--call{border-radius:inherit}