/**
 * Planix — Terms of Service
 *
 * Identical document shell to css/privacy-policy.css (kept as a separate file
 * so each page loads only the CSS it needs). See that file for the rationale on
 * the `.dark` ancestor scoping — never `.dark body`.
 */

:root {
      color-scheme: light;
      --ink:#0f172a;
      --muted:#64748b;
      --line:#e2e8f0;
      --brand:#2563eb;
      --brand-ink:#1d4ed8;
      --soft:#eff6ff;
      --card:#ffffff;
      --canvas:#f8fafc;
    }
    * { box-sizing:border-box; }
    body { margin:0; background:var(--canvas); color:var(--ink); font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }

    /* ===== Page content column ===== */
    .shell { width:100%; max-width:860px; margin:0 auto; padding:40px 24px 88px; }
    @media (max-width:767px){ .shell { padding:24px 16px calc(88px + env(safe-area-inset-bottom,0px)); } .content { padding:24px 20px 28px; } }

    /* ===== Sticky page header ===== */
    .top { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:calc(12px + env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) 12px max(24px,env(safe-area-inset-left,0px)); position:sticky; top:0; z-index:30; background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
    .top-left { display:flex; align-items:center; gap:12px; min-width:0; flex-wrap:wrap; }
    .top-right { display:flex; align-items:center; gap:12px; }
    .top .logo { color:var(--brand); font-weight:800; font-size:1.15rem; letter-spacing:-.02em; text-decoration:none; white-space:nowrap; }
    /* min-height was 36px, under the 44px touch target minimum. */
    .back { display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--muted); font-size:.875rem; font-weight:600; text-decoration:none; transition:border-color .18s ease,color .18s ease,background-color .18s ease; }
    .back:hover { border-color:#cbd5e1; color:var(--ink); }
    .back:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.25); }

    /* ===== Page heading ===== */
    .page-head { margin-bottom:28px; }
    /* .7rem was 11.2px, below the 12px legibility floor. */
    .eyebrow { display:inline-block; color:var(--brand); font-size:.8125rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
    h1 { margin:10px 0 12px; font-size:clamp(1.9rem,5vw,2.5rem); font-weight:800; line-height:1.12; letter-spacing:-.045em; }
    .intro { margin:0; max-width:64ch; color:var(--muted); font-size:.975rem; line-height:1.75; }
    .updated { display:inline-flex; align-items:center; gap:8px; margin:16px 0 0; padding:6px 12px; border-radius:999px; background:var(--soft); color:var(--brand-ink); font-size:.75rem; font-weight:600; }

    /* ===== Document card ===== */
    .content { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:32px 34px 36px; box-shadow:0 1px 2px rgba(15,23,42,.04),0 12px 28px -18px rgba(15,23,42,.18); }

    /* Sections are separated by a hairline so the eye can find each clause
       quickly; the first one carries no rule. */
    .doc-section + .doc-section { margin-top:26px; padding-top:26px; border-top:1px solid var(--line); }
    .doc-section h2 { margin:0 0 8px; font-size:1rem; font-weight:700; letter-spacing:-.015em; color:var(--ink); }
    .doc-section p { margin:0; }

    p, li { color:var(--muted); font-size:.9rem; line-height:1.75; }
    p + p { margin-top:10px; }

    /* ===== Lists ===== */
    .doc-list { list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
    .doc-list li { position:relative; padding-left:24px; }
    .doc-list li::before { content:""; position:absolute; left:0; top:.32em; width:15px; height:15px; border-radius:50%; background:var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px 10px no-repeat; }

    /* ===== Links ===== */
    .content a { color:var(--brand); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(37,99,235,.35); transition:border-color .18s ease,color .18s ease; }
    .content a:hover { color:var(--brand-ink); border-bottom-color:currentColor; }
    .content a:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.25); border-radius:4px; }

    /* ===== Cross-link footer ===== */
    .doc-footer { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:22px; }
    .doc-footer__label { color:var(--muted); font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
    .doc-footer a { display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--muted); font-size:.875rem; font-weight:600; text-decoration:none; transition:border-color .18s ease,color .18s ease; }
    .doc-footer a:hover { border-color:#cbd5e1; color:var(--ink); }
    .doc-footer a:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.25); }

    /* ===== Dark theme (.dark on <html> and/or <body>) ===== */
    .dark { color-scheme: dark; }
    .dark body { background-color:#0f172a; color:#f1f5f9; }
    .dark .top { background:rgba(15,23,42,.85); border-bottom-color:#1e293b; }
    .dark .logo { color:#60a5fa; }
    .dark .back { background:#1e293b; border-color:#334155; color:#94a3b8; }
    .dark .back:hover { border-color:#475569; color:#e2e8f0; }
    .dark h1 { color:#f8fafc; }
    .dark .eyebrow { color:#60a5fa; }
    .dark .intro { color:#94a3b8; }
    .dark .updated { background:rgba(96,165,250,.14); color:#93c5fd; }
    .dark .content { background:#1e293b; border-color:#334155; box-shadow:0 12px 32px -18px rgba(0,0,0,.7); }
    .dark .doc-section + .doc-section { border-top-color:#334155; }
    .dark .doc-section h2 { color:#e2e8f0; }
    .dark p, .dark li { color:#94a3b8; }
    .dark .doc-list li::before { background-color:rgba(96,165,250,.16); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }
    .dark .content a { color:#60a5fa; border-bottom-color:rgba(96,165,250,.4); }
    .dark .content a:hover { color:#93c5fd; }
    .dark .doc-footer__label { color:#94a3b8; }
    .dark .doc-footer a { background:#1e293b; border-color:#334155; color:#94a3b8; }
    .dark .doc-footer a:hover { border-color:#475569; color:#e2e8f0; }

    /* ===== Responsive ===== */
    @media(max-width:767px){
      .shell{padding:24px 16px 72px}
      .top{padding:10px 16px}
      .content{padding:24px 20px 28px;border-radius:14px}
      .doc-section + .doc-section{margin-top:20px;padding-top:20px}
    }
    @media (min-width:768px){ .shell{padding-top:48px} }
    @media (prefers-reduced-motion:reduce){ .back,.doc-footer a,.content a{transition:none} }

    /* The former .mobile-nav-toggle / -overlay / -backdrop / -panel / -link
       block (68 lines) was removed: those class names appear in no page and
       no script, one declaration used the invalid value `display:inline-flex`,
       and its @media(max-width:560px) gated a control that does not exist. */