/* The web demo page, in the website's language: warm paper, ink type, black pills. The island is the only dark
   thing on it. island.css loads first (the island itself, fonts, tokens); this file gives the page its own ground and
   undoes what island.css assumes about being a transparent window. Page classes must not reuse island class names. */
[hidden] { display: none !important; }
:root { --paper: #f6f6f3; --ink: #0d0d0f; --ink2: #5c5c63; --ink3: #8a8a91; --line: rgba(13, 13, 15, 0.1); --line2: rgba(13, 13, 15, 0.16); --white: #fff; --violet: #4652ef; }
html, body { background: var(--paper); overflow: auto; height: auto; }
body { color: var(--ink); user-select: text; cursor: auto; min-height: 100vh; display: flex; flex-direction: column; font-size: 16px; }
a { color: inherit; text-decoration: none; }
main { flex: 1; display: grid; place-items: center; padding: 24px 20px 56px; }

.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px clamp(20px, 4vw, 48px); }
.logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 16px; letter-spacing: -0.015em; }
.logo img { height: 15px; width: auto; display: block; }
.bar-right { display: flex; align-items: center; gap: 18px; }
.link { font-size: 15px; color: var(--ink2); transition: color 0.2s; }
.link:hover { color: var(--ink); }
.w-live { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.w-live i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; transition: box-shadow 0.12s linear; }

.w-pill { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent; background: var(--ink); color: #fff; font: 500 15px/1 var(--sans); letter-spacing: -0.005em; cursor: pointer; white-space: nowrap; transition: background 0.2s, transform 0.2s, opacity 0.2s, border-color 0.2s; }
.w-pill:hover { background: #2a2a30; }
.w-pill:active { transform: scale(0.98); }
.w-pill:disabled { opacity: 0.35; cursor: not-allowed; }
.w-pill.w-big { height: 52px; padding: 0 26px; font-size: 16px; }
.w-pill.w-quiet { background: transparent; color: var(--ink); border-color: var(--line2); }
.w-pill.w-quiet:hover { background: var(--white); border-color: rgba(13, 13, 15, 0.3); }

/* ===== setup ===== */
.setup { width: 100%; max-width: 720px; display: grid; gap: 34px; justify-items: center; text-align: center; animation: rise 0.6s var(--ease) both; }
h1 { margin: 0; font-weight: 600; font-size: clamp(38px, 6vw, 64px); line-height: 1; letter-spacing: -0.045em; font-variation-settings: "wdth" 104; }
.lede { margin: -14px 0 0; font-size: 18px; line-height: 1.5; color: var(--ink2); max-width: 46ch; }
.q { display: grid; gap: 12px; justify-items: center; width: 100%; }
.label { margin: 0; font-size: 15px; font-weight: 500; color: var(--ink2); }
.choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.opt { height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line2); background: var(--white); color: var(--ink); font: 450 15px/1 var(--sans); cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.2s; }
.opt:hover { border-color: rgba(13, 13, 15, 0.32); }
.opt:active { transform: scale(0.97); }
.opt[aria-checked="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.hint { margin: 0; font-size: 14.5px; color: var(--ink3); min-height: 1.4em; }
.go { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
#name { height: 52px; width: 210px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line2); background: var(--white); color: var(--ink); font: 400 16px/1 var(--sans); text-align: center; outline: none; transition: border-color 0.18s, box-shadow 0.18s; }
#name::placeholder { color: var(--ink3); }
#name:focus { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(70, 82, 239, 0.14); }
.fine { margin: -18px 0 0; font-size: 13.5px; color: var(--ink3); }

/* ===== the call: the island on the agent's MacBook, the customer under it ===== */
.call { width: 100%; max-width: 880px; display: grid; gap: 28px; justify-items: center; animation: rise 0.6s var(--ease) both; }
/* sized so the laptop and the customer under it fit the window without scrolling */
.mac { width: min(100%, calc((100svh - 420px) / 0.6)); min-width: min(100%, 320px); filter: drop-shadow(0 40px 50px rgba(13, 13, 15, 0.22)); }
/* the lid from the front: a thin black bezel with an aluminium edge, rounded at the top like the real one */
.mac-lid { margin: 0 6.5%; padding: 1.6% 1.6% 2.4%; border-radius: 22px 22px 6px 6px; background: #0a0a0c; box-shadow: 0 0 0 1.5px #4a4b52, 0 0 0 2.5px #2a2b30, inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.mac-screen { position: relative; aspect-ratio: 16 / 10; border-radius: 10px 10px 3px 3px; overflow: hidden; container-type: inline-size;
  background: radial-gradient(70% 60% at 50% 115%, rgba(93, 103, 255, 0.55), transparent 70%), radial-gradient(60% 50% at 15% -10%, rgba(147, 82, 255, 0.28), transparent 70%), linear-gradient(180deg, #121220, #0a0a12); }
.mac-bar { position: absolute; inset: 0 0 auto; z-index: 2; height: 2.6cqw; padding: 0 1.6cqw; display: flex; align-items: center; justify-content: space-between; font-size: 1.15cqw; color: rgba(255, 255, 255, 0.78); background: rgba(10, 10, 16, 0.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.mac-menu { display: flex; gap: 1.7cqw; } .mac-menu b { font-weight: 600; color: #fff; }
.mac-status { display: flex; align-items: center; gap: 1.1cqw; } .mac-status svg { height: 1.05cqw; width: auto; display: block; }
/* the notch, and the island sliding out from under it */
.mac-notch { position: absolute; left: 50%; top: 0; z-index: 4; width: 15cqw; height: 2.7cqw; transform: translateX(-50%); background: #000; border-radius: 0 0 1.2cqw 1.2cqw; display: grid; place-items: center; }
.mac-notch i { width: 0.7cqw; height: 0.7cqw; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2a2d44, #08080c); }
#wrap { position: absolute; left: 0; right: 0; top: 3.3cqw; z-index: 3; display: flex; justify-content: center; align-items: flex-start; transform-origin: 50% 0; }
/* the island keeps its own size and colours (the page's ink must not leak in); it is scaled down whole when the screen is small */
#island { color: var(--txt); flex: none; }
/* the base from the front: space grey, a little wider than the lid, with the thumb scoop in the middle */
.mac-base { position: relative; height: clamp(10px, 2.1vw, 18px); border-radius: 2px 2px 18px 18px / 2px 2px 14px 14px; background: linear-gradient(180deg, #6b6c73 0%, #3b3c42 30%, #26272c 75%, #17181b 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.mac-base i { position: absolute; left: 50%; top: 0; width: 13%; height: 45%; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #1b1c20, #2b2c31); }
.note { margin: -8px 0 0; font-size: 14.5px; color: var(--ink3); text-align: center; transition: opacity 0.6s; min-height: 1.4em; }
.them { display: grid; gap: 10px; justify-items: center; text-align: center; max-width: 560px; }
.face { position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--white); border: 1px solid var(--line2); font-weight: 600; font-size: 22px; color: var(--ink); }
.face::before, .face::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid var(--violet); opacity: 0; }
.them.speaking .face::before { animation: ripple 1.6s ease-out infinite; }
.them.speaking .face::after { animation: ripple 1.6s ease-out 0.8s infinite; }
/* ringing: the same ripple, quieter and slower, in grey */
.them.ringing .face::before, .them.ringing .face::after { border-color: rgba(13, 13, 15, 0.25); }
.them.ringing .face::before { animation: ripple 2s ease-out infinite; }
.them.ringing .face::after { animation: ripple 2s ease-out 1s infinite; }
@keyframes ripple { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(1.7); opacity: 0; } }
.who { margin: 4px 0 0; display: flex; align-items: baseline; gap: 8px; font-size: 15px; }
.who b { font-weight: 560; }
.who span { color: var(--ink3); }
.said { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.4vw, 24px); line-height: 1.35; color: var(--ink); min-height: 2.7em; text-wrap: balance; }

/* ===== the result ===== */
.result { width: 100%; max-width: 620px; display: grid; gap: 18px; justify-items: center; text-align: center; animation: rise 0.6s var(--ease) both; }
.ring { position: relative; width: 156px; height: 156px; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 6; stroke: var(--line); }
.ring circle#arc { stroke: var(--ink); stroke-linecap: round; stroke-dasharray: 339.3; stroke-dashoffset: 339.3; transition: stroke-dashoffset 1.4s var(--ease); }
.ring b { font-size: 52px; font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.outcome { margin: 0; font-size: 15px; font-weight: 500; color: var(--ink2); }
.w-tip { margin: 0; font-size: 18px; line-height: 1.5; max-width: 48ch; color: var(--ink); text-wrap: pretty; }
.steps { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: 14px; color: var(--ink3); }
.steps li::before { content: "○"; margin-right: 6px; }
.steps li.hit { color: var(--ink); }
.steps li.hit::before { content: "●"; color: #22c55e; }

@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .bar { padding: 16px 20px; }
  .lede { font-size: 16.5px; }
  #name { width: 100%; }
  .go { width: 100%; } .go .w-pill { width: 100%; }
  .mac-lid { border-radius: 14px 14px 4px 4px; }
}
@media (prefers-reduced-motion: reduce) { .setup, .call, .result { animation: none; } .them.speaking .face::before, .them.speaking .face::after { animation: none; } }

/* Mona Sans draws a slashed zero in tabular figures, which reads as code: plain figures on the page */
.bar, .setup, .them, .result { font-variant-numeric: normal; }