@import url('/brand.css');
@import url('/footer.css');

:root {
  --canvas:var(--donde-canvas-deep);
  --card:var(--donde-card);
  --ink:var(--donde-ink);
  --muted:var(--donde-ink-muted);
  --faint:var(--donde-ink-faint);
  --border:var(--donde-border);
  --border-strong:var(--donde-border-strong);
  --cobalt:var(--donde-cobalt);
  --cobalt-dark:var(--donde-cobalt-dark);
  --cobalt-soft:var(--donde-cobalt-soft);
  --green:var(--donde-green);
  --green-dark:var(--donde-green-dark);
  --green-soft:var(--donde-green-soft);
  --coral:var(--donde-coral);
  --coral-soft:var(--donde-coral-soft);
  --violet:var(--donde-violet);
  --violet-soft:var(--donde-violet-soft);
  --brand-lavender-soft:var(--donde-brand-lavender-soft);
  --shadow:0 24px 72px color-mix(in srgb, var(--donde-inverse) 12%, transparent);
  --shell:min(1180px, calc(100vw - 48px));
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:104px; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--canvas); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button, a { font:inherit; -webkit-tap-highlight-color:transparent; }
img { display:block; max-width:100%; }
::selection { color:var(--donde-on-action); background:var(--donde-action); }
:focus-visible { outline:3px solid var(--cobalt); outline-offset:3px; }

.skip-link { position:fixed; z-index:200; top:-80px; left:16px; padding:10px 16px; border-radius:999px; background:var(--donde-card); box-shadow:var(--shadow); font-weight:800; }
.skip-link:focus { top:16px; }
.shell { width:var(--shell); margin-inline:auto; }

.legal-header { position:sticky; z-index:100; top:0; padding:12px 0; background:color-mix(in srgb, var(--donde-hero) 76%, transparent); backdrop-filter:blur(18px); }
.legal-nav { min-height:66px; padding:8px 10px 8px 18px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; border:1px solid color-mix(in srgb, var(--donde-border-strong) 78%, transparent); border-radius:22px; background:color-mix(in srgb, var(--donde-card) 94%, transparent); box-shadow:0 12px 34px color-mix(in srgb, var(--donde-inverse) 7%, transparent); }
.brand { width:fit-content; display:inline-flex; align-items:center; gap:10px; font-size:22px; line-height:1; font-weight:800; letter-spacing:-1px; }
.brand img { width:50px; height:32px; object-fit:contain; }
.legal-links { display:flex; align-items:center; gap:28px; color:var(--muted); font-size:13px; font-weight:750; }
.legal-links a:hover, .legal-links a[aria-current="page"] { color:var(--cobalt); }
.app-link { justify-self:end; min-height:44px; padding:10px 17px; display:inline-flex; align-items:center; border-radius:999px; color:var(--donde-on-action); background:var(--donde-action); font-size:13px; font-weight:800; }
.app-link:hover { background:var(--donde-action-hover); }
.menu-button { display:none; justify-self:end; width:44px; height:44px; border:1px solid var(--border-strong); border-radius:50%; color:var(--ink); background:var(--donde-card); font-size:20px; line-height:1; }

.legal-hero { position:relative; padding:100px 0 72px; overflow:hidden; background:var(--brand-lavender-soft) ; }
.legal-hero::before { content:none; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; color:var(--cobalt); font-size:11px; font-weight:850; letter-spacing:1.45px; text-transform:uppercase; }
.eyebrow::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--donde-action); box-shadow:0 0 0 5px color-mix(in srgb, var(--donde-brand-cobalt) 11%, transparent); }
.legal-hero h1 { max-width:850px; margin:20px 0 0; font-size:clamp(54px, 7vw, 88px); line-height:.98; letter-spacing:-5px; }
.legal-hero > .shell > p { max-width:720px; margin:25px 0 0; color:var(--muted); font-size:18px; line-height:1.7; }
.updated { margin-top:26px; display:inline-flex; padding:7px 11px; border-radius:999px; color:var(--muted); background:var(--donde-card); border:1px solid var(--border); font-size:11px; font-weight:700; }

.legal-layout { padding-top:48px; padding-bottom:120px; display:grid; grid-template-columns:230px minmax(0, 1fr); align-items:start; gap:72px; }
.legal-toc { position:sticky; top:105px; padding:18px; border:1px solid var(--border); border-radius:20px; background:var(--donde-card); box-shadow:0 12px 32px color-mix(in srgb, var(--donde-inverse) 5%, transparent); }
.legal-toc strong { display:block; margin:0 0 10px; color:var(--faint); font-size:9px; letter-spacing:1.15px; text-transform:uppercase; }
.legal-toc a { display:block; padding:8px 9px; border-radius:9px; color:var(--muted); font-size:12px; font-weight:700; }
.legal-toc a:hover { color:var(--cobalt); background:var(--cobalt-soft); }

.legal-content { min-width:0; }
.summary-card { margin-bottom:22px; padding:26px; display:grid; grid-template-columns:48px 1fr; gap:16px; border:1px solid var(--border); border-radius:22px; background:var(--donde-card); box-shadow:0 14px 38px color-mix(in srgb, var(--donde-inverse) 7%, transparent); }
.summary-mark { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; color:var(--green-dark); background:var(--green-soft); font-weight:900; }
.summary-card strong { font-size:18px; letter-spacing:-.5px; }
.summary-card p { margin:5px 0 0; color:var(--muted); font-size:14px; }

.legal-section { margin-top:18px; padding:34px; scroll-margin-top:104px; border:1px solid var(--border); border-radius:24px; background:var(--donde-card); }
.legal-section:first-of-type { margin-top:0; }
.section-number { color:var(--cobalt); font-size:9px; font-weight:850; letter-spacing:1.2px; text-transform:uppercase; }
.legal-section h2 { margin:7px 0 16px; font-size:29px; line-height:1.15; letter-spacing:-1.35px; }
.legal-section h3 { margin:26px 0 8px; font-size:17px; letter-spacing:-.45px; }
.legal-section p { margin:12px 0; color:var(--muted); font-size:15px; }
.legal-section ul, .legal-section ol { margin:14px 0; padding-left:21px; color:var(--muted); }
.legal-section li { margin:8px 0; padding-left:3px; }
.legal-section a:not(.button) { color:var(--cobalt-dark); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--donde-brand-cobalt) 35%, transparent); text-underline-offset:3px; }

.provider-grid, .support-grid { margin-top:18px; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.provider-card, .support-card { padding:17px; border:1px solid var(--border); border-radius:15px; background:var(--canvas); }
.provider-card strong, .support-card strong { display:block; font-size:13px; }
.provider-card p, .support-card p { margin:5px 0 0; font-size:12px; }

.notice { margin:20px 0; padding:18px; border:1px solid var(--donde-cobalt-soft); border-radius:16px; color:var(--muted); background:var(--cobalt-soft); }
.notice strong { display:block; color:var(--ink); }
.notice.warning { border-color:var(--donde-coral-soft); background:var(--coral-soft); }
.notice.success { border-color:var(--donde-jade-soft); background:var(--green-soft); }
.configuration-missing { color:var(--donde-coral); font-weight:800; }

.action-row { margin-top:22px; display:flex; flex-wrap:wrap; gap:10px; }
.button { min-height:48px; padding:12px 18px; display:inline-flex; align-items:center; justify-content:center; border:1px solid transparent; border-radius:999px; font-size:13px; font-weight:800; }
.button.primary { color:var(--donde-on-action); background:var(--donde-action); }
.button.secondary { border-color:var(--border-strong); background:var(--donde-card); }
.button[aria-disabled="true"] { cursor:not-allowed; opacity:.72; }

@media (max-width: 860px) {
  :root { --shell:min(720px, calc(100vw - 32px)); }
  .legal-nav { grid-template-columns:1fr auto; }
  .legal-links { position:absolute; top:82px; right:16px; left:16px; padding:14px; display:none; flex-direction:column; align-items:stretch; gap:0; border:1px solid var(--border-strong); border-radius:18px; background:var(--donde-card); box-shadow:var(--shadow); }
  .legal-links.open { display:flex; }
  .legal-links a { padding:11px 8px; border-bottom:1px solid var(--border); }
  .legal-links a:last-child { border-bottom:0; }
  .app-link { display:none; }
  .menu-button { display:block; }
  .legal-layout { grid-template-columns:1fr; gap:24px; }
  .legal-toc { position:static; display:flex; flex-wrap:wrap; gap:4px; }
  .legal-toc strong { width:100%; }
}

@media (max-width: 560px) {
  :root { --shell:calc(100vw - 28px); }
  .legal-header { padding:8px 0; }
  .legal-nav { min-height:60px; padding-left:13px; border-radius:18px; }
  .brand { gap:8px; font-size:18px; }
  .brand img { width:44px; height:29px; }
  .legal-hero { padding:70px 0 52px; }
  .legal-hero h1 { font-size:48px; letter-spacing:-3px; }
  .legal-hero > .shell > p { font-size:16px; }
  .legal-layout { padding-top:32px; padding-bottom:84px; }
  .legal-toc { overflow-x:auto; flex-wrap:nowrap; }
  .legal-toc strong { display:none; }
  .legal-toc a { flex:0 0 auto; }
  .legal-section { padding:24px 20px; border-radius:20px; }
  .legal-section h2 { font-size:25px; }
  .provider-grid, .support-grid { grid-template-columns:1fr; }
  .summary-card { padding:20px; grid-template-columns:42px 1fr; }
  .summary-mark { width:42px; height:42px; }
}

.support-monster{display:block;width:310px;max-width:100%;height:205px;object-fit:contain;margin:24px 0 0}