/* ============================================================
   mycomp — Legal pages (Terms / Imprint / Privacy)
   Dark mycomp aesthetic · Poppins · orange accent
   ============================================================ */
:root {
  --ink:    #0b0b0c;
  --ink-2:  #17171b;
  --ink-3:  #2a2a2e;
  --mute:   #9a9a9f;
  --light:  #ebebeb;
  --orange: #f26722;
  --blue:   #51ade1;
  --maxw:   1100px;
  --readw:  820px;
  --gutter: 36px;
  --font-mono: 'Poppins', sans-serif;
  --font-sans: 'Poppins', sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: var(--ink); color: var(--light); font-family: 'Poppins', sans-serif; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--orange); color: var(--ink); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* TOPBAR */
.topbar { position: sticky; top: 0; z-index: 60; background: rgba(11,11,12,0.88); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid rgba(255,255,255,0.06); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 22px; padding-bottom: 22px; }
.topbar-brand { display: flex; align-items: center; gap: 14px; }
.topbar-brand .sep { width: 1px; height: 16px; background: var(--ink-3); }
.topbar-brand .tag { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); }
.topbar-back { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); transition: color 120ms; }
.topbar-back:hover { color: var(--light); }
.topbar-back i, .topbar-back svg { width: 12px; height: 12px; }

/* HERO */
.l-hero { padding: 72px 0 44px; border-bottom: 1px solid var(--ink-3); }
.l-hero .overline { font-size: 18px; color: var(--orange); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 18px; display: block; }
.l-hero h1 { font-size: clamp(40px, 6vw, 76px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.0; color: var(--light); margin: 0 0 18px; }
.l-hero h1 .dot { color: var(--orange); }
.l-hero .meta { font-size: 12px; color: var(--mute); letter-spacing: 0.04em; margin: 0; }

/* BODY */
.l-body { padding: 56px 0 110px; }
.l-body .wrap { max-width: var(--maxw); }
.l-body .wrap > * { max-width: var(--readw); }
.l-intro { font-size: 16px; line-height: 1.7; color: var(--mute); margin: 0 0 48px; }
.l-intro strong { color: var(--light); font-weight: 600; }

.l-section { padding: 36px 0; border-top: 1px solid var(--ink-3); }
.l-section:first-of-type { border-top: none; padding-top: 0; }
.l-section-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.l-section-num { font-size: 20px; color: var(--orange); letter-spacing: 0.02em; flex-shrink: 0; }
.l-section h2 { font-size: 24px; font-weight: 700; color: var(--light); margin: 0; letter-spacing: -0.015em; }
.l-section h3 { font-size: 15px; font-weight: 600; color: var(--light); margin: 26px 0 8px; letter-spacing: 0.01em; }
.l-section p { font-size: 14px; line-height: 1.75; color: var(--mute); margin: 0 0 14px; max-width: none; }
.l-section p:last-child { margin-bottom: 0; }
.l-section a[href^="mailto"], .l-section a[href^="http"], .l-section a.inline-link { color: var(--blue); border-bottom: 1px solid rgba(81,173,225,0.4); transition: border-color 120ms; }
.l-section a[href^="mailto"]:hover, .l-section a[href^="http"]:hover, .l-section a.inline-link:hover { border-color: var(--blue); }
.l-list { margin: 22px 0 14px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; max-width: none; }
.l-list li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.65; color: var(--mute); }
.l-list li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }
.l-list li strong { color: var(--light); font-weight: 600; }

/* Definition rows (used in Imprint) */
.l-dl { display: grid; grid-template-columns: 200px 1fr; gap: 14px 28px; margin: 22px 0 8px; }
@media (max-width: 640px) { .l-dl { grid-template-columns: 1fr; gap: 4px 0; } .l-dl dt + dd { margin-bottom: 16px; } }
.l-dl dt { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); padding-top: 3px; }
.l-dl dd { margin: 0; font-size: 14px; line-height: 1.6; color: var(--light); }
.l-note { margin-top: 44px; padding: 20px 22px; border: 1px solid var(--ink-3); border-left: 2px solid var(--orange); background: var(--ink-2); font-size: 13px; line-height: 1.65; color: var(--mute); }

/* Cross-links between legal pages */
.l-crosslinks { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 56px; }
.l-crosslinks a { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 1px solid var(--ink-3); border-radius: 999px; font-size: 12px; color: var(--mute); letter-spacing: 0.02em; transition: color 120ms, border-color 120ms, background 120ms; }
.l-crosslinks a:hover { color: var(--light); border-color: var(--light); background: var(--ink-2); }
.l-crosslinks a.current { color: var(--ink); background: var(--orange); border-color: var(--orange); pointer-events: none; }

/* FOOTER */
.l-foot { border-top: 1px solid var(--ink-3); padding: 30px 0; --mute: #c4c4c9; }
.l-foot-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.l-foot-inner p { font-size: 11px; color: var(--mute); letter-spacing: 0.1em; text-transform: uppercase; margin: 0; }
.l-foot-links { display: flex; gap: 20px; }
.l-foot-links a { font-size: 11px; color: var(--mute); letter-spacing: 0.1em; text-transform: uppercase; transition: color 120ms; }
.l-foot-links a:hover { color: var(--light); }

/* ============================================================
   MOBILE SCALING — phones (≤600px)
   ============================================================ */
@media (max-width: 600px) {
  :root { --gutter: 22px; }

  /* Header — comfortable symmetric padding so the logo reads cleanly */
  .topbar-inner { padding: 16px 22px !important; }
  .topbar-brand svg { width: 59px !important; }

  /* Hero title: override inline 60px/nowrap so long titles wrap & fit */
  .l-hero { padding: 52px 0 36px; }
  .l-hero h1 { font-size: clamp(28px, 7.5vw, 44px) !important; white-space: normal !important; line-height: 1.06; }
  .l-hero .overline { font-size: 15px; margin-bottom: 14px; }

  /* Body rhythm */
  .l-body { padding: 40px 0 72px; }
  .l-section { padding: 30px 0; }
  .l-section-head { gap: 10px; }

  /* Footer stacks cleanly */
  .l-foot-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .l-foot-links { gap: 16px; flex-wrap: wrap; }
}