/* ALL kit: what every page of the new site shares. The base (tokens, type, buttons), the bar with its menu and the day/night switch, the footer, the purchase
   dialogs, Robi and the floating voice guide, the ChatGPT window, the golden ribbon, and the components pages are built from (tabs, accordions, steps, the case
   window). Day and night share every rule; only tokens change. The homepage adds /v7/v7.css on top of this file. */
@font-face { font-family: "Inter Tight"; src: url("/v7/fonts/inter-tight.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  /* ALL's own colors: the logo's gold, Robi's indigo kimono and its orange trim, on warm paper. One brand surface per section, never more. */
  --bg: #fffdf8; --soft: #f8f3e8; --soft-2: #f0e8d7; --panel: #ffffff; --ink: #17140f; --ink-2: #3d3830; --muted: #7a7366; --faint: #a59e90;
  --line: #ece4d3; --line-2: #ddd3bf; --pill: #17140f; --pill-ink: #fffdf8; --chip: #f3ecdd;
  --gold: #ffc61a; --gold-2: #ffb000; --gold-soft: #fff3c9; --orange: #f07a1a; --indigo: #1f2c52; --indigo-2: #2b3b6b; --cream: #fbf3e2;
  --me: #1f2c52; --me-ink: #fbf3e2;
  --green: #1a7f37; --green-soft: #e7f5ea; --amber-soft: #ffedd9; --amber-ink: #b15a00;
  --shadow: 0 1px 2px rgba(40, 30, 10, .05), 0 12px 40px -12px rgba(40, 30, 10, .14);
  --shadow-lg: 0 2px 4px rgba(40, 30, 10, .05), 0 30px 80px -20px rgba(40, 30, 10, .26);
  --waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cg fill='none' stroke='%23e9b84a' stroke-opacity='.35' stroke-width='1.4'%3E%3Cpath d='M0 24a24 24 0 0 1 48 0M6 24a18 18 0 0 1 36 0M12 24a12 12 0 0 1 24 0M18 24a6 6 0 0 1 12 0'/%3E%3Cpath d='M-24 12a24 24 0 0 1 48 0M-18 12a18 18 0 0 1 36 0M-12 12a12 12 0 0 1 24 0M-6 12a6 6 0 0 1 12 0M24 12a24 24 0 0 1 48 0M30 12a18 18 0 0 1 36 0M36 12a12 12 0 0 1 24 0M42 12a6 6 0 0 1 12 0'/%3E%3C/g%3E%3C/svg%3E");
  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1222; --soft: #151b30; --soft-2: #1c2440; --panel: #11172a; --ink: #f6f0e2; --ink-2: #d4cdbd; --muted: #9a94a6; --faint: #6f6b7e;
    --line: #232b45; --line-2: #2f3a5a; --pill: #ffc61a; --pill-ink: #17140f; --chip: #1b2239;
    --gold-soft: #2c2712; --me: #2b3b6b; --me-ink: #fbf3e2; --green: #4ade80; --green-soft: #10261c; --amber-soft: #2c1f12; --amber-ink: #ffb35c;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 40px -12px rgba(0, 0, 0, .6); --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 30px 80px -20px rgba(0, 0, 0, .75);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1222; --soft: #151b30; --soft-2: #1c2440; --panel: #11172a; --ink: #f6f0e2; --ink-2: #d4cdbd; --muted: #9a94a6; --faint: #6f6b7e;
  --line: #232b45; --line-2: #2f3a5a; --pill: #ffc61a; --pill-ink: #17140f; --chip: #1b2239;
  --gold-soft: #2c2712; --me: #2b3b6b; --me-ink: #fbf3e2; --green: #4ade80; --green-soft: #10261c; --amber-soft: #2c1f12; --amber-ink: #ffb35c;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 40px -12px rgba(0, 0, 0, .6); --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 30px 80px -20px rgba(0, 0, 0, .75);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--pill); color: var(--pill-ink); padding: 10px 16px; border-radius: 10px; }
.skip:focus { top: 16px; }
.wrap { width: min(1120px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---- buttons ----------------------------------------------------------------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: 999px; border: 0;
  font-weight: 500; font-size: 16px; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .15s, background .15s, opacity .15s; }
.btn:active { transform: scale(.98); }
.btn-dark { background: var(--pill); color: var(--pill-ink); }
.btn-dark:hover { opacity: .88; }
.btn-soft { background: var(--chip); color: var(--ink); }
.btn-soft:hover { background: var(--soft-2); }
.btn-gold { background: linear-gradient(180deg, #ffd54a, var(--gold) 55%, var(--gold-2)); color: #17140f; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 8px 20px -8px rgba(230, 150, 0, .6); }
.btn-gold:hover { filter: brightness(1.03); }
.btn-lg { min-height: 50px; padding: 13px 26px; font-size: 17px; }

/* ---- nav --------------------------------------------------------------------------------------------------------------------------------------- */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav-in { position: relative; width: min(1340px, 100% - 2 * var(--gutter)); margin: 0 auto; height: 72px; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.brand img { width: 30px; }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nw { white-space: nowrap; }
.theme-toggle { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--chip); cursor: pointer; display: grid; place-items: center; }
.theme-toggle span { width: 15px; height: 15px; border-radius: 50%; background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); border: 1.8px solid var(--ink); }
@media (max-width: 560px) { .nav-actions .btn-soft { display: none; } }

/* ---- 1. presentamos ---------------------------------------------------------------------------------------------------------------------------- */
.hero { text-align: center; padding: clamp(56px, 9vh, 104px) var(--gutter) 0; }
.announce { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); text-decoration: none; }
.announce b { font-weight: 600; color: var(--ink); }
.announce i { width: 22px; height: 22px; border-radius: 50%; background: var(--chip); display: grid; place-items: center; font-style: normal; font-size: 12px; }
.meet { margin: 24px auto 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; column-gap: .24em; font-size: clamp(44px, 6.4vw, 84px); line-height: 1.08;
  font-weight: 560; letter-spacing: -.045em; }
.meet-mark { display: inline-block; width: 1.12em; height: .9em; position: relative; top: .02em; }
.meet-mark svg { width: 100%; height: 100%; overflow: visible; }
.hero-sub { max-width: 640px; margin: 20px auto 0; font-size: clamp(18px, 1.55vw, 21px); line-height: 1.5; color: var(--muted); text-wrap: balance; }
.hero-sub strong { color: var(--ink); font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.hero-meta { margin: 16px 0 0; font-size: 13.5px; color: var(--faint); }

/* ---- the ChatGPT window: ChatGPT's own screen, the composer and the conversation ALL works in (the homepage's box and the case windows) ----------------------- */
.gpt { --g-bg: #ffffff; --g-ink: #0d0d0d; --g-muted: #8f8f8f; --g-line: #e5e5e5; --g-soft: #f4f4f4; --g-chip: #f9f9f9; --g-send: #0d0d0d; --g-send-ink: #fff; --g-mention: #0a66ff;
  position: relative; isolation: isolate; height: 640px; border-radius: 22px; background: var(--g-bg); color: var(--g-ink); border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden;
  display: flex; flex-direction: column; }
:root[data-theme="dark"] .gpt { --g-bg: #212121; --g-ink: #ececec; --g-muted: #9b9b9b; --g-line: #383838; --g-soft: #303030; --g-chip: #2a2a2a; --g-send: #ececec; --g-send-ink: #0d0d0d; --g-mention: #6aa5ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gpt { --g-bg: #212121; --g-ink: #ececec; --g-muted: #9b9b9b; --g-line: #383838; --g-soft: #303030; --g-chip: #2a2a2a; --g-send: #ececec; --g-send-ink: #0d0d0d; --g-mention: #6aa5ff; } }
.gpt-top { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 18px; flex: none; }
.gpt-model { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 500; }
.gpt-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--g-muted); background: var(--g-chip); border: 1px solid var(--g-line); border-radius: 999px; padding: 4px 10px; }
.gpt-replay { margin-left: auto; border: 1px solid var(--g-line); background: var(--g-bg); color: var(--g-ink); border-radius: 999px; padding: 6px 12px; font-size: 13.5px; cursor: pointer; }
.gpt-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 20px 18px; }
.gpt-hello { margin: 0 0 26px; font-size: clamp(24px, 2.4vw, 30px); font-weight: 400; letter-spacing: -.01em; text-align: center; }
.gpt-thread { display: none; width: min(740px, 100%); flex: 1; min-height: 0; overflow-y: auto; padding: 8px 4px 16px; scrollbar-width: thin; }
.gpt.is-chat .gpt-body { justify-content: flex-start; }
.gpt.is-chat .gpt-hello { display: none; }
.gpt.is-chat .gpt-thread { display: flex; flex-direction: column; gap: 18px; }
.gpt-composer { position: relative; width: min(740px, 100%); display: flex; align-items: center; gap: 6px; padding: 9px 10px 9px 14px; border-radius: 28px; background: var(--g-bg); border: 1px solid var(--g-line);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .05), 0 0 1px rgba(0, 0, 0, .1); flex: none; }
.gpt-plus, .gpt-mic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--g-ink); flex: none; }
.gpt-field { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.gpt-field textarea { width: 100%; resize: none; border: 0; outline: 0; background: transparent; color: var(--g-ink); font: inherit; font-size: 16px; line-height: 24px; padding: 6px 4px; max-height: 120px; }
.gpt-field textarea::placeholder { color: var(--g-muted); }
.gpt-typed { position: absolute; inset: 0; display: none; padding: 6px 4px; font-size: 16px; line-height: 24px; white-space: nowrap; overflow: hidden; pointer-events: none; }
.gpt-typed .mention, .msg-mention { color: var(--g-mention); font-weight: 500; }
.gpt-typed .caret { display: inline-block; width: 1.5px; height: 1.15em; margin-left: 1px; background: var(--g-ink); vertical-align: -.2em; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.gpt.is-typing .gpt-typed { display: block; }
.gpt.is-typing textarea { color: transparent; }
.gpt.is-typing textarea::placeholder { color: transparent; }
.gpt-think { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; height: 34px; border-radius: 999px; color: var(--g-muted); font-size: 14.5px; flex: none; }
.gpt-send { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--g-send); color: var(--g-send-ink); display: grid; place-items: center; cursor: pointer; flex: none; transition: transform .15s; }
.gpt-send .i-send { display: none; }
.gpt.has-text .gpt-send .i-send { display: block; }
.gpt.has-text .gpt-send .i-voice { display: none; }
.gpt-send.is-pressed { transform: scale(.88); }
.gpt-suggest { width: min(740px, 100%); margin-top: 18px; display: grid; gap: 2px; justify-items: start; }
.gpt-suggest[hidden], .gpt.is-chat .gpt-suggest { display: none; }
.gpt-suggest button { display: inline-flex; align-items: center; gap: 12px; border: 0; background: transparent; color: var(--g-muted); font-size: 16px; padding: 10px 12px; border-radius: 12px; cursor: pointer; }
.gpt-suggest button:hover { background: var(--g-chip); color: var(--g-ink); }
/* the conversation, ChatGPT's way: the person's message in a soft bubble on the right, the answer as plain text */
.turn-me { align-self: flex-end; max-width: 78%; background: var(--g-soft); border-radius: 22px; padding: 10px 16px; font-size: 16px; line-height: 1.5; }
.turn-ai { align-self: stretch; font-size: 16px; line-height: 1.6; }
.turn-ai p { margin: 0 0 10px; } .turn-ai p:last-child { margin: 0; }
.tool { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--g-muted); margin-bottom: 10px; }
.tool img { width: 18px; height: auto; }
.tool .spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--g-line); border-top-color: var(--g-ink); animation: turn .8s linear infinite; }
.tool.is-done .spin { display: none; }
.tool .shimmer { background: linear-gradient(90deg, var(--g-muted) 20%, var(--g-ink) 45%, var(--g-muted) 70%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 1.6s linear infinite; }
.tool.is-done .shimmer { animation: none; background: none; color: var(--g-muted); }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.tool-steps { list-style: none; margin: 0 0 12px; padding: 0 0 0 4px; display: grid; gap: 4px; font-size: 14px; color: var(--g-muted); border-left: 2px solid var(--g-line); }
.tool-steps li { padding-left: 12px; }
.tool-steps li::before { content: "✓ "; color: #16a34a; font-weight: 700; }
/* the capture shows only the browser's bar and the site's top bar, like a small preview */
.capture { margin: 4px 0 12px; max-width: 400px; border-radius: 14px; overflow: hidden; border: 1px solid var(--g-line); background: var(--g-soft); }
.capture-img { position: relative; aspect-ratio: 1280 / 150; overflow: hidden; }
.capture-img > div { position: absolute; left: 0; right: 0; top: 0; }
.capture figcaption { padding: 8px 12px; font-size: 13px; color: var(--g-muted); }
.guide-message { display: flex; gap: 10px; align-items: flex-start; }
.guide-message-user { justify-content: flex-end; }
.guide-message-user .guide-bubble { background: var(--g-soft); border-radius: 22px; padding: 10px 16px; max-width: 78%; }
.guide-message-assistant .guide-bubble { padding: 4px 0; max-width: 100%; }
.guide-avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: url("/v7/img/robi-avatar.png") center / cover; font-size: 0; margin-top: 2px; }
.guide-bubble { font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.guide-bubble p { margin: 0 0 8px; } .guide-bubble p:last-child { margin: 0; }
.guide-bubble ul { margin: 4px 0; padding-left: 20px; }
.guide-thinking .guide-bubble { display: inline-flex; gap: 4px; padding-top: 12px; }
.guide-thinking i { width: 6px; height: 6px; border-radius: 50%; background: var(--g-muted); animation: dot 1s infinite alternate; }
@keyframes dot { to { opacity: .3; transform: translateY(-2px); } }
@keyframes turn { to { transform: rotate(360deg); } }
.guide-action-link { display: inline-flex; margin: 8px 6px 0 0; padding: 8px 14px; border-radius: 999px; border: 0; background: var(--g-send); color: var(--g-send-ink); font-size: 14px; text-decoration: none; cursor: pointer; }
.guide-inline-link { font-weight: 600; }
.robi-line { align-self: center; font-size: 13.5px; color: var(--g-muted); display: inline-flex; align-items: center; gap: 8px; }
.robi-line img { width: 22px; height: 22px; border-radius: 50%; }
@media (max-width: 700px) {
  .gpt { height: 600px; }
  .gpt-think, .gpt-mic { display: none; }
  .gpt-suggest button { font-size: 15px; }
}
/* ---- section heads: a centered title and one paragraph, no labels ------------------------------------------------------------------------------- */
.section { padding: clamp(96px, 14vh, 160px) 0 0; }
.head { text-align: center; max-width: 760px; margin: 0 auto; }
.head h2 { margin: 0; font-size: clamp(34px, 4.2vw, 54px); line-height: 1.08; font-weight: 560; letter-spacing: -.04em; text-wrap: balance; }
.head p { margin: 18px auto 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--ink-2); text-wrap: balance; }

/* start in five minutes: numbered steps on one line, the commands as plain lines (no cards inside cards) */
.steps { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: s; position: relative; }
.steps::before { content: ""; position: absolute; left: 22px; right: 22px; top: 21px; height: 2px; background: var(--line-2); }
.steps li { counter-increment: s; position: relative; display: grid; gap: 6px; align-content: start; }
.steps li::before { content: counter(s); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; font-weight: 600; background: var(--gold); color: #17140f;
  box-shadow: 0 0 0 6px var(--bg); margin-bottom: 8px; }
.steps b { font-size: 18px; font-weight: 560; }
.steps span { color: var(--ink-2); font-size: 15.5px; }
.cmds { margin-top: 40px; border-top: 1px solid var(--line); }
.cmds p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cmds small { width: 100%; font-size: 12.5px; color: var(--muted); }
.cmds code { flex: 1; min-width: 0; font: 14px var(--mono); overflow-wrap: anywhere; color: var(--ink); }
.cmds button { border: 0; background: transparent; font-size: 14px; font-weight: 600; color: var(--amber-ink); cursor: pointer; padding: 4px 0; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: 22px; } .steps::before { left: 21px; right: auto; top: 22px; bottom: 22px; width: 2px; height: auto; }
  .steps li { padding-left: 64px; } .steps li::before { position: absolute; left: 0; top: 0; } }

/* ---- 7. FAQ ------------------------------------------------------------------------------------------------------------------------------------ */
.faq-grid { margin: 48px auto 0; max-width: 860px; }
.faq-grid details { border-bottom: 1px solid var(--line); }
.faq-grid summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 20px 4px; }
.faq-grid summary::-webkit-details-marker { display: none; }
.faq-grid summary h3 { margin: 0; flex: 1; font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.faq-grid summary::after { content: "+"; font-size: 24px; font-weight: 300; color: var(--muted); transition: transform .2s; }
.faq-grid details[open] summary::after { transform: rotate(45deg); }
.faq-grid details > p { margin: 0 4px 14px; color: var(--ink-2); font-size: 16px; }
.faq-grid details > p:last-child { margin-bottom: 22px; }
.faq-grid a { font-weight: 600; }

/* ---- 8. CTA ------------------------------------------------------------------------------------------------------------------------------------ */
.cta { margin: clamp(96px, 14vh, 160px) auto 0; width: min(1120px, 100% - 2 * var(--gutter)); border-radius: 32px; background: var(--waves) bottom / 48px 24px, var(--indigo); color: var(--cream); text-align: center;
  padding: 0 var(--gutter) clamp(48px, 7vh, 72px); overflow: hidden; }
.cta .robi { width: clamp(220px, 26vw, 320px); margin: 0 auto -6px; }
.cta h2 { margin: 0; font-size: clamp(34px, 4.2vw, 54px); font-weight: 560; letter-spacing: -.04em; line-height: 1.08; }
.cta p { max-width: 620px; margin: 16px auto 0; color: #d8d1c0; font-size: 18px; }
.cta .btn-soft { background: rgba(255, 255, 255, .1); color: var(--cream); }

/* ---- footer (the homepage's own markup) ---------------------------------------------------------------------------------------------------------- */
.site-footer { margin-top: 96px; padding: 56px 0 36px; border-top: 1px solid var(--line); font-size: 15px; }
.site-footer .hazard { display: none; }
.site-footer .wrap { width: min(1120px, 100% - 2 * var(--gutter)); margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; }
.footer-top .brand { color: var(--ink); }
.footer-top .brand-icon { width: 34px; }
.footer-top .brand-word { width: 60px; height: auto; }
.footer-top p { color: var(--muted); max-width: 300px; }
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col h4 { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.footer-col a { text-decoration: none; color: var(--ink-2); }
.footer-col a:hover { color: var(--ink); }
.footer-note { margin: 36px 0 0; font-size: 13px; color: var(--muted); max-width: 900px; }
.footer-bottom { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); }
@media (max-width: 760px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-top > div:first-child { grid-column: 1 / -1; } }

/* ---- purchase dialogs (the homepage's own markup, driven by /app.js) ------------------------------------------------------------------------------ */
.purchase-sheet { width: min(540px, calc(100% - 32px)); max-height: calc(100% - 32px); border: 0; padding: 0; border-radius: 24px; background: var(--panel); color: var(--ink); box-shadow: var(--shadow-lg); }
.purchase-sheet::backdrop { background: rgba(10, 10, 10, .45); backdrop-filter: blur(4px); }
.purchase-sheet-inner { position: relative; padding: 28px; display: grid; gap: 14px; }
.purchase-close { position: absolute; right: 14px; top: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--chip); font-size: 20px; cursor: pointer; }
.purchase-brand { display: flex; align-items: center; gap: 10px; padding-right: 48px; min-height: 36px; }
.purchase-brand span { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--gold); font-weight: 700; color: #1a1406; }
.purchase-brand i { flex: 1; }
.purchase-brand small { color: var(--muted); }
.purchase-kicker { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.purchase-copy h2 { margin: 4px 0; font-size: 26px; font-weight: 560; letter-spacing: -.03em; }
.purchase-copy p { margin: 0; color: var(--ink-2); }
.purchase-plans { display: grid; gap: 8px; }
.purchase-plans button { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; padding: 14px 16px; border-radius: 16px; border: 0; background: var(--soft); cursor: pointer; }
.purchase-plans button:hover, .purchase-plans button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink) inset; }
.purchase-plans b { display: block; font-weight: 600; }
.purchase-plans small { color: var(--muted); }
.purchase-plans strong { font-size: 20px; font-weight: 600; }
.purchase-primary, .purchase-sheet [data-purchase-start] { min-height: 50px; border-radius: 999px; border: 0; background: var(--pill); color: var(--pill-ink); font-weight: 500; font-size: 16px; cursor: pointer; }
.purchase-license-row { display: flex; gap: 8px; }
.purchase-license-row input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); font: inherit; }
.purchase-license-row button { border-radius: 12px; border: 0; padding: 0 16px; background: var(--pill); color: var(--pill-ink); cursor: pointer; }
.purchase-state, .purchase-sheet small { color: var(--muted); font-size: 14px; }
.purchase-downloads a { display: inline-flex; margin: 4px 6px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--soft); text-decoration: none; font-weight: 500; }

/* ---- motion: hidden only while this page's script runs, until it shows them ---------------------------------------------------------------------- */
.js [data-rise]:not(.in) { opacity: 0; transform: translateY(18px); }
@media (prefers-reduced-motion: reduce) {
  .js [data-rise]:not(.in) { opacity: 1; transform: none; }
  .status::before, .typing i, .guide-thinking i { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---- the floating trial pill for the rest of the page ---------------------------------------------------------------------------------------------------- */
.trial-float { position: fixed; left: 50%; bottom: 18px; z-index: 40; display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--pill); color: var(--pill-ink); text-decoration: none; font-weight: 500; font-size: 15px; box-shadow: var(--shadow-lg);
  transform: translate(-50%, 160%); opacity: 0; pointer-events: none; transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .25s; }
.trial-float b { font-weight: 500; }
.trial-float span { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; padding: 6px 10px; border-radius: 999px; background: var(--gold); color: #17140f; }
.trial-float.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }

/* ---- the golden ribbon behind the page: the cards pass over it, so it weaves; one point lights up per section ------------------------------------------ */
.ribbon { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: 0; overflow: visible; }
main { position: relative; z-index: 1; }
.ribbon-body { fill: none; stroke: url(#ribbon-gold); stroke-width: 14; stroke-linecap: round; }
.ribbon-shine { fill: none; stroke: #fff7cf; stroke-opacity: .55; stroke-width: 3; stroke-linecap: round; }
.ribbon-points circle { fill: var(--bg); stroke: var(--line-2); stroke-width: 3; transform-box: fill-box; transform-origin: center; transition: fill .4s, stroke .4s, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.ribbon-points circle.on { fill: var(--gold); stroke: #fff7cf; transform: scale(1.35); }
@media (max-width: 760px) { .ribbon-body { stroke-width: 6; } .ribbon-shine { stroke-width: 1.5; } }
@media (prefers-reduced-motion: reduce) { .ribbon-points circle { transition: none; } }

/* ---- sparkles: Robi and the ticket both wear them --------------------------------------------------------------------------------------------------- */
.spark { position: absolute; width: 16px; height: 16px; pointer-events: none; background: linear-gradient(135deg, #fff3b0, #ffc61a 55%, #f07a1a);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); scale: 0; animation: twinkle 2.6s ease-in-out infinite paused; }
.spark.s2 { width: 11px; height: 11px; animation-delay: .9s; }
.spark.s3 { width: 9px; height: 9px; animation-delay: 1.7s; }
@keyframes twinkle { 0%, 100% { scale: 0; rotate: 0deg; opacity: 0; } 35% { scale: 1; rotate: 45deg; opacity: 1; } 60% { scale: .5; rotate: 70deg; opacity: .7; } 80% { scale: 0; opacity: 0; } }

/* ---- Robi, like a lottie: she arrives with a bounce, breathes and floats, every few seconds hops (squash and stretch), and hops again when touched ------- */
.cta .robi { position: relative; display: block; }
.robi { isolation: isolate; }
.robi::before { content: ""; position: absolute; inset: 10% 8% 22%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 198, 26, .34), rgba(255, 198, 26, 0));
  animation: glow 4.5s ease-in-out infinite paused; }
@keyframes glow { 0%, 100% { opacity: .55; scale: .92; } 50% { opacity: 1; scale: 1.06; } }
.robi-body { position: relative; transform-origin: 50% 100%; animation: robi-live 8s ease-in-out infinite paused; }
.robi-body img { display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(to bottom, #000 64%, transparent 97%); mask-image: linear-gradient(to bottom, #000 64%, transparent 97%); }
.cta .robi-body img { -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
@keyframes robi-live {
  0%   { translate: 0 0;     rotate: 0deg;    scale: 1; }
  18%  { translate: 0 -8px;  rotate: -1.4deg; scale: 1.012 1.02; }
  36%  { translate: 0 -2px;  rotate: .8deg;   scale: 1; }
  56%  { translate: 0 -9px;  rotate: 1.5deg;  scale: 1.012 1.02; }
  76%  { translate: 0 0;     rotate: 0deg;    scale: 1; }
  82%  { translate: 0 2px;   rotate: 0deg;    scale: 1.035 .955; }
  88%  { translate: 0 -20px; rotate: -2.5deg; scale: .975 1.045; }
  94%  { translate: 0 1px;   rotate: .6deg;   scale: 1.025 .975; }
  100% { translate: 0 0;     rotate: 0deg;    scale: 1; }
}
.robi.is-live .robi-body, .robi.is-live::before, .robi.is-live .spark { animation-play-state: running; }
.robi .s1 { top: 6%; left: 16%; }
.robi .s2 { top: 20%; right: 12%; }
.robi .s3 { top: 46%; left: 6%; }
.cta .robi-body { animation-delay: -6.5s; }
.cta img, .robi-pop img { pointer-events: auto; cursor: pointer; }
.burst { position: absolute; left: 50%; top: 30%; width: 10px; height: 10px; margin: -5px; pointer-events: none; z-index: 2; background: linear-gradient(135deg, #fff3b0, #ffc61a);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }

@media (prefers-reduced-motion: reduce) {
  .robi-body, .robi::before, .spark { animation: none; }
  .spark { scale: 1; opacity: .9; }
}

/* ---- the voice view: ChatGPT's voice mode in ALL's colours. The orb grows with whoever is talking (--level comes from the call's volume) ------------------ */
.voice-view { display: grid; justify-items: center; align-content: center; gap: 10px; text-align: center; }
.voice-view[hidden] { display: none; }
.voice-view.in-box { position: absolute; inset: 56px 0 0; z-index: 4; background: var(--g-bg); color: var(--g-ink); padding: 20px; }
.voice-who { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--g-muted, var(--muted)); letter-spacing: .01em; }
.voice-orb { --size: 170px; position: relative; width: var(--size); height: var(--size); margin: 8px 0 10px; }
.voice-orb::before { content: ""; position: absolute; inset: -10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 198, 26, .22), rgba(255, 198, 26, 0));
  scale: calc(.85 + var(--level, 0) * .8); transition: scale .12s linear; }
.voice-orb canvas { position: absolute; inset: -12%; width: 124%; height: 124%; }
.voice-view[data-mode="error"] .voice-orb { filter: grayscale(.9); opacity: .6; }
.voice-status { margin: 0; font-size: 17px; font-weight: 600; }
.voice-caption { margin: 0; max-width: 46ch; min-height: 3em; font-size: 15px; line-height: 1.5; color: var(--g-muted, var(--muted)); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.voice-controls { display: flex; gap: 14px; margin-top: 6px; }
.voice-controls button { width: 52px; height: 52px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; transition: scale .15s; }
.voice-controls button:active { scale: .92; }
.voice-controls svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.voice-mute { background: var(--g-soft, var(--soft)); color: var(--g-ink, var(--ink)); }
.voice-mute .voice-slash { display: none; }
.voice-mute[aria-pressed="true"] .voice-slash { display: block; }
.voice-mute[aria-pressed="true"] { background: var(--g-ink, var(--ink)); color: var(--g-bg, var(--bg)); }
.voice-end { background: #e5484d; color: #fff; }
.voice-note { margin-top: 4px; font-size: 12px; color: var(--g-muted, var(--faint)); }

/* ---- the floating voice guide: Robi with her phone and a sign that says "¿Dudas?", fading into the page at the bottom, and a call button ------------------- */
.callbot { position: fixed; right: 14px; bottom: 0; z-index: 45; width: 200px; transition: translate .45s cubic-bezier(.22, 1, .36, 1), opacity .3s; }
/* while the ChatGPT box is on screen it has its own voice button (and its own Robi), so the floating one steps out of the way */
.callbot.is-tucked:not(.in-call) { translate: 0 105%; opacity: 0; pointer-events: none; }
.callbot[hidden] { display: none; }
.callbot-robi { display: block; position: relative; }
.callbot-robi img { cursor: default; }
.callbot-sign { position: absolute; left: 60.5%; top: 3.6%; width: 33%; height: 15%; display: grid; place-items: center; rotate: -6deg; font-size: 16px; font-weight: 700;
  letter-spacing: -.02em; color: #1b1712; pointer-events: none; }
.callbot-call { position: absolute; left: -38px; bottom: 30px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #ffd54a, var(--gold) 55%, var(--gold-2)); color: #17140f; font: 600 15px var(--sans); cursor: pointer; box-shadow: 0 12px 26px -10px rgba(176, 96, 0, .7); }
.callbot-call svg { width: 20px; height: 20px; fill: #17140f; }
.callbot-call::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(255, 198, 26, .7); animation: ring 2.2s ease-out infinite; }
.callbot-call svg { animation: phone-shake 2.2s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(255, 198, 26, .6); } 70%, 100% { box-shadow: 0 0 0 16px rgba(255, 198, 26, 0); } }
@keyframes phone-shake { 0%, 60%, 100% { rotate: 0deg; } 64% { rotate: -14deg; } 68% { rotate: 12deg; } 72% { rotate: -10deg; } 76% { rotate: 8deg; } 80% { rotate: 0deg; } }
.callbot-close { position: absolute; left: 6px; top: 12%; z-index: 3; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--panel); color: var(--muted);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .16); font-size: 17px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .2s; }
.callbot:hover .callbot-close, .callbot-close:focus-visible { opacity: 1; }
.call-card { position: absolute; right: calc(100% - 10px); bottom: 26px; width: 300px; padding: 22px 18px 16px; border-radius: 24px; background: var(--panel); color: var(--ink);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); --g-muted: var(--muted); --g-soft: var(--soft); --g-ink: var(--ink); --g-bg: var(--panel); }
.call-card .voice-orb { --size: 120px; }
.callbot.in-call .callbot-call { display: none; }
body.in-call .gpt .voice-hint, body.in-call .trial-float { display: none; }
@media (hover: none) { .callbot-close { opacity: 1; } }
@media (max-width: 760px) {
  .callbot { width: 128px; right: 6px; }
  .callbot-sign { font-size: 11.5px; }
  .callbot-call { left: -30px; bottom: 18px; padding: 8px 12px 8px 10px; font-size: 14px; }
  .trial-float { left: 12px; transform: translate(0, 160%); }
  .trial-float.is-on { transform: translate(0, 0); }
  /* on a phone the pill shrinks to its gold tag, so it never runs into the voice guide's call button */
  .trial-float { padding-right: 14px; }
  .trial-float b { display: none; }
  .call-card { position: fixed; left: 12px; right: 12px; bottom: 12px; width: auto; }
  .callbot.in-call .callbot-robi { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .callbot-call::before, .callbot-call svg, .voice-hint-arrow { animation: none; } .vh-line, .vh-head { stroke-dashoffset: 0; animation: none; } }
/* ---- the menu: a pill in the middle of the bar, with two rich panels (Producto, Seguridad) that open on hover or click, and a full menu on phones ------- */
.menu { flex: 1; display: flex; justify-content: center; }
.menu-list { list-style: none; margin: 0; padding: 4px; display: flex; align-items: center; gap: 2px; border-radius: 999px; background: color-mix(in srgb, var(--soft) 80%, transparent);
  box-shadow: 0 0 0 1px var(--line) inset; }
.menu-top { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 15px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2);
  font: 500 15px var(--sans); text-decoration: none; cursor: pointer; transition: background .15s, color .15s; }
.menu-top:hover, .menu-item.is-open .menu-top { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 0 0 1px var(--line); }
.chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: rotate .2s; }
.menu-item.is-open .chev { rotate: 180deg; }
.menu-item { position: static; }
.menu-panel { position: absolute; top: calc(100% - 6px); left: 50%; translate: -50% 0; width: min(780px, calc(100vw - 32px)); display: grid; grid-template-columns: 1fr 236px; gap: 10px;
  padding: 10px; border-radius: 24px; background: var(--panel); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); z-index: 60; }
.menu-panel[hidden] { display: none; }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; align-content: start; }
.menu-link { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 16px; text-decoration: none; color: var(--ink); transition: background .15s; }
.menu-link:hover, .menu-link:focus-visible, .menu-link[aria-current="page"] { background: var(--soft); }
.menu-link b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.menu-link small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.mi { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--gold-soft); color: var(--amber-ink); transition: scale .2s; }
.menu-link:hover .mi { scale: 1.08; }
.mi svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.menu-feature { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; min-height: 250px; padding: 18px; border: 0; border-radius: 18px;
  text-align: left; text-decoration: none; color: #17140f; cursor: pointer; font: inherit;
  background: radial-gradient(120% 90% at 80% 0%, #fff1a8 0%, #ffd23f 40%, #f7a11a 100%); }
.menu-feature img { position: absolute; right: -24px; top: -10px; width: 190px; height: auto; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 92%); mask-image: linear-gradient(to bottom, #000 55%, transparent 92%); transition: translate .4s cubic-bezier(.22, 1, .36, 1); }
.menu-feature:hover img { translate: -6px -4px; }
.menu-feature.is-voice { background: radial-gradient(120% 90% at 80% 0%, #3a4c86 0%, #1f2c52 55%, #141d38 100%); color: #fff8e6; }
.menu-feature b { position: relative; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.menu-feature small { position: relative; font-size: 13.5px; line-height: 1.4; opacity: .85; max-width: 190px; }
.menu-go { position: relative; align-self: flex-start; margin-top: 10px; padding: 7px 13px; border-radius: 999px; background: #17140f; color: #fff8e6; font-size: 13.5px; font-weight: 600; }
.menu-feature.is-voice .menu-go { background: var(--gold); color: #17140f; }
.nav-account { font-size: 15px; color: var(--ink-2); text-decoration: none; padding: 0 6px; }
.nav-account:hover { color: var(--ink); }
.menu-burger { display: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--soft); cursor: pointer; place-items: center; }
.menu-burger span, .menu-burger span::before, .menu-burger span::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); position: relative; transition: rotate .2s, translate .2s, opacity .2s; }
.menu-burger span::before, .menu-burger span::after { content: ""; position: absolute; left: 0; }
.menu-burger span::before { top: -6px; } .menu-burger span::after { top: 6px; }
.menu-burger[aria-expanded="true"] span { background: transparent; }
.menu-burger[aria-expanded="true"] span::before { translate: 0 6px; rotate: 45deg; }
.menu-burger[aria-expanded="true"] span::after { translate: 0 -6px; rotate: -45deg; }
.menu-mobile { border-top: 1px solid var(--line); background: var(--bg); max-height: calc(100dvh - 72px); overflow-y: auto; padding: 8px var(--gutter) 24px; }
.menu-mobile[hidden] { display: none; }
.menu-mobile .menu-grid { grid-template-columns: 1fr; }
.menu-mobile-head { margin: 18px 12px 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.menu-plain .menu-link { padding: 12px; }
.menu-mobile-cta { display: grid; gap: 10px; margin-top: 18px; }
@media (max-width: 1240px) { .nav-account { display: none; } .menu-top { padding: 0 12px; } }
@media (max-width: 1080px) { .menu { display: none; } .menu-burger { display: grid; } }
@media (min-width: 1081px) { .menu-mobile { display: none !important; } }

/* ---- components pages are built from ------------------------------------------------------------------------------------------------------------------ */
.hero-title { margin: 0 auto; max-width: 15em; font-size: clamp(40px, 5.6vw, 72px); line-height: 1.08; font-weight: 560; letter-spacing: -.045em; text-wrap: balance; }
.fine { margin: 16px auto 0; max-width: 780px; text-align: center; font-size: 13.5px; color: var(--muted); }
.page-note { width: min(780px, 100% - 2 * var(--gutter)); margin-top: 56px; }
.steps a { font-size: 15px; font-weight: 600; color: var(--amber-ink); text-decoration: none; }
.steps a:hover { text-decoration: underline; text-underline-offset: 3px; }
.steps span span { display: inline; }

/* tabs: a row of pills that change what is below. Without the script every panel is simply shown, so the row hides itself. */
[data-tabs] > [role="tablist"] { display: none; }
.js [data-tabs] > [role="tablist"] { display: flex; }
.js [data-tabs] > [role="tabpanel"]:not(.is-active) { display: none; }
[data-tabs] { scroll-margin-top: 92px; }
.tabbar { flex-wrap: wrap; justify-content: center; gap: 6px; }
.tabbar [role="tab"] { border: 0; border-radius: 999px; padding: 9px 16px; background: var(--panel); box-shadow: 0 0 0 1px var(--line) inset; cursor: pointer; font-size: 15px;
  color: var(--ink-2); transition: background .15s, color .15s, transform .15s; }
.tabbar [role="tab"]:hover { background: var(--soft); color: var(--ink); }
.tabbar [role="tab"]:active { transform: scale(.97); }
.tabbar [role="tab"][aria-selected="true"] { background: var(--pill); color: var(--pill-ink); box-shadow: none; }
.tabbar-groups [role="tab"] { padding: 12px 22px; font-size: 16px; font-weight: 500; }
.tabbar-cases { margin-top: 22px; }
.tabbar-cases [role="tab"] { padding: 8px 15px; font-size: 14.5px; background: transparent; }
.tabbar-cases [role="tab"]:hover { background: var(--chip); }
.tabbar-cases [role="tab"][aria-selected="true"] { background: var(--gold-soft); color: var(--amber-ink); font-weight: 600; box-shadow: 0 0 0 1.5px var(--gold) inset; }

/* the picker: group tabs, then case tabs, then the case and its window. It is the page's one big surface-free area: the ChatGPT window is its only card. */
.picker { position: relative; margin-top: 52px; }
.group-lead { margin: 26px auto 0; max-width: 640px; text-align: center; color: var(--ink-2); font-size: 18px; line-height: 1.5; text-wrap: balance; }
.case { margin-top: 30px; }
.case-text { max-width: 720px; margin: 0 auto; text-align: center; }
.case-text h3 { margin: 0; font-size: clamp(22px, 2.4vw, 28px); font-weight: 560; letter-spacing: -.025em; line-height: 1.2; text-wrap: balance; }
.case-text p { margin: 12px 0 0; color: var(--ink-2); font-size: 17px; line-height: 1.55; text-wrap: pretty; }
.case-window { width: min(820px, 100%); height: auto; margin: 28px auto 0; }
.case-window .gpt-top { height: 52px; }
.case-window .gpt-body { padding: 0 20px 8px; }
.case-window .gpt-thread { overflow: visible; width: min(720px, 100%); padding: 4px 4px 14px; }
.turn-me .caret { display: inline-block; width: 1.5px; height: 1.15em; margin-left: 1px; background: var(--g-ink); vertical-align: -.2em; animation: caret 1s steps(1) infinite; }
.chat-rest { visibility: hidden; }
.turn-copy { align-self: flex-end; margin: -10px 4px 0 0; border: 0; background: none; color: var(--g-muted); font-size: 13.5px; padding: 4px 9px; border-radius: 8px; cursor: pointer; }
.turn-copy:hover { background: var(--g-chip); color: var(--g-ink); }
.chat-said { font-weight: 600; margin: 0 0 8px; }
.case-window .tool-steps { font-size: 15px; color: var(--g-ink); margin-bottom: 14px; gap: 6px; }
.chat-figs { display: grid; gap: 10px; margin: 2px 0 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chat-figs.is-1 { grid-template-columns: minmax(0, 360px); }
.chat-figs.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
.chat-figs figure { margin: 0; }
.chat-figs img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; box-shadow: 0 0 0 1px var(--g-line); }
.chat-figs figcaption { padding: 7px 2px 0; font-size: 13px; line-height: 1.35; color: var(--g-muted); }
.chat-badge { margin: 4px 0 0; }
.pill { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; padding: 4px 12px 4px 10px; border-radius: 999px; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-tested { color: var(--green); background: var(--green-soft); }
.pill-recipe { color: var(--amber-ink); background: var(--amber-soft); }
.pill-tools { color: var(--ink-2); background: var(--chip); }
@keyframes tab-in { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 700px) {
  .tabbar-groups [role="tab"] { padding: 10px 16px; font-size: 15px; }
  .case-window { height: auto; margin-top: 22px; }
  .case-window .gpt-body { padding: 0 12px 4px; }
  .turn-me { max-width: 92%; }
  .chat-figs, .chat-figs.is-2, .chat-figs.is-3 { grid-template-columns: 1fr; max-width: none; }
  .chat-figs.is-1 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .turn-me .caret { animation: none; } }


/* ---- Robi the concierge: the card that asks for the email and the 6-digit code (in the chat and inside a call), the line that says she can act on the account, and the checkmarks of what she did ---- */
.cc-card { --cc-line: var(--g-line, var(--line)); --cc-bg: var(--g-chip, var(--soft)); --cc-ink: var(--g-ink, var(--ink)); --cc-muted: var(--g-muted, var(--muted));
  display: grid; gap: 10px; margin: 10px 0 2px; padding: 14px; max-width: 420px; border: 1px solid var(--cc-line); border-radius: 16px; background: var(--cc-bg); color: var(--cc-ink); text-align: left; }
.cc-card[hidden], .cc-card [hidden] { display: none; }
.cc-title { margin: 0; font-size: 14.5px; line-height: 1.45; font-weight: 500; }
.cc-step { display: grid; gap: 10px; margin: 0; }
.cc-label { display: grid; gap: 6px; font-size: 13px; color: var(--cc-muted); }
.cc-input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--cc-line); background: var(--g-bg, var(--panel)); color: var(--cc-ink); font: 400 16px/1.3 var(--sans); }
.cc-input::placeholder { color: var(--cc-muted); opacity: .7; }
.cc-input:focus-visible { outline: 2px solid var(--cc-ink); outline-offset: 1px; }
.cc-code { font-family: var(--mono); font-size: 22px; letter-spacing: .4em; text-align: center; padding-left: .4em; }
.cc-btn { min-height: 44px; padding: 10px 18px; border: 0; border-radius: 999px; background: var(--g-send, var(--ink)); color: var(--g-send-ink, var(--bg)); font: 600 15px var(--sans); cursor: pointer; }
.cc-btn:disabled { opacity: .55; cursor: default; }
.cc-sent { margin: 0; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.cc-resend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; font-size: 13px; color: var(--cc-muted); }
.cc-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cc-resend .cc-link { color: var(--cc-ink); }
.cc-done { margin: 0; font-size: 15px; font-weight: 500; }
.cc-done::before { content: "✓"; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: #2f9e5b; color: #fff; font-size: 12px; font-weight: 700; vertical-align: 1px; }
.cc-error { margin: 0; font-size: 13.5px; line-height: 1.4; color: #c4352d; }
:root[data-theme="dark"] .cc-error { color: #ff8a80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cc-error { color: #ff8a80; } }
.cc-card.is-voice { max-width: none; width: 100%; box-sizing: border-box; margin: 4px 0 0; padding: 12px; gap: 8px; }
.cc-card.is-voice .cc-title { font-size: 13px; }
.cc-voice { width: 100%; }
.cc-voice:empty { display: none; }
.voice-view.in-box .cc-voice { max-width: 420px; }
.cc-bar { display: flex; align-items: center; gap: 8px; width: min(740px, 100%); box-sizing: border-box; margin: 0 auto 8px; padding: 0 6px; font-size: 13px; color: var(--g-muted, var(--muted)); }
.cc-bar[hidden] { display: none; }
.cc-bar-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #2f9e5b; }
.cc-bar [data-cc-bar-text] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-bar .cc-link { margin-left: auto; flex: none; color: var(--g-ink, var(--ink)); }
.cc-actions { list-style: none; margin: 10px 0 0 !important; padding: 0 !important; display: grid; gap: 4px; font-size: 13.5px; color: var(--g-muted, var(--muted)); }
.cc-actions li { display: flex; gap: 8px; align-items: baseline; }
.cc-actions li::before { content: "✓"; flex: none; color: #2f9e5b; font-weight: 700; }
.cc-actions li.is-failed::before { content: "–"; color: var(--g-muted, var(--muted)); }
.cc-summary .guide-bubble { padding: 10px 14px; border-radius: 14px; background: var(--g-chip, var(--soft)); border: 1px solid var(--g-line, var(--line)); }
.cc-summary-title { font-size: 12.5px; font-weight: 600; color: var(--g-muted, var(--muted)); text-transform: none; }
.cc-summary-text { font-size: 15px; }
@media (max-width: 760px) { .cc-code { font-size: 20px; letter-spacing: .3em; } }
/* a call with the card open: the view scrolls instead of clipping, and the orb and the caption give her room */
.voice-view.in-box { overflow-y: auto; align-content: safe center; }
.voice-view:has(.cc-card:not([hidden])) .voice-orb { --size: 88px; margin: 0 0 6px; }
.voice-view:has(.cc-card:not([hidden])) .voice-caption { min-height: 0; }
.voice-view:has(.cc-card:not([hidden])) .voice-note { display: none; }
.call-card { max-height: calc(100dvh - 24px); overflow-y: auto; }
.callbot.in-call .callbot-close { display: none; }
.cc-refunds { display: grid; gap: 10px; margin: 10px 0 2px; max-width: 420px; }
.cc-refunds[hidden] { display: none; }
.cc-refund { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--g-line, var(--line)); border-radius: 16px; background: var(--g-chip, var(--soft)); color: var(--g-ink, var(--ink)); text-align: left; }
.cc-refund-text { margin: 0; font-size: 14px; line-height: 1.45; }
.cc-refund-note { margin: 0; font-size: 14px; line-height: 1.4; color: var(--g-muted, var(--muted)); }
.cc-refund-note.is-ok { color: var(--g-ink, var(--ink)); font-weight: 500; }
.cc-voice .cc-refunds { max-width: none; width: 100%; }