/*
  Qdrive website — shared styles.

  Loaded by every page. Holds the tokens, base type, the top bar and its one
  dropdown, the pill buttons, section scaffolding and the footer. Page-specific
  layout (the download hero, the help articles) stays inline in each page.

  The look is modelled on box.com: a saturated bar and hero on a white body.
  It commits to one theme, so every colour is painted explicitly.
*/

:root {
  --brand:      #5b3fe0;   /* Qdrive indigo — swap for #0061d5 to get Box blue */
  --brand-deep: #3b1fb0;
  --brand-vivid:#7c3aed;
  --ink:        #1a1a2e;
  --muted:      #5f5e78;
  --line:       #e6e4f0;
  --ground:     #ffffff;
  --tint:       #f5f4fb;
  --on-brand:   #ffffff;
  --ok:         #0f7b3d;

  --font: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --measure: 66ch;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
img { max-width: 100%; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); }
a:focus-visible, button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 5px var(--brand); }

h1, h2, h3, h4 { letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
p { max-width: var(--measure); }

/* ───────────── pills ───────────── */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .9rem 1.6rem; border-radius: 999px; border: 2px solid transparent;
  font-family: var(--font); font-size: 1.1rem; font-weight: 700; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
.pill:hover { transform: translateY(-1px); }
.pill-ghost { color: var(--on-brand); border-color: rgba(255,255,255,.45); background: transparent; }
.pill-ghost:hover { background: rgba(255,255,255,.12); }
.pill-solid { background: var(--brand-deep); color: var(--on-brand); }
.pill-solid:hover { background: #2e178f; }
.pill-brand { background: var(--brand); color: #fff; }
.pill-brand:hover { background: var(--brand-deep); }
.pill-white { background: #fff; color: var(--brand); box-shadow: 0 10px 30px -12px rgba(0,0,0,.35); }
.pill-white:hover { background: #f4f2ff; }
.pill svg { width: 1.2rem; height: 1.2rem; flex: none; fill: currentColor; }

/* ───────────── top bar ─────────────
   Box has a mega-menu because Box sells twelve products. Qdrive sells one,
   so the bar is plain links plus a single small dropdown (Support) that opens
   on hover or click the way Box's do. Below 960px it collapses behind a
   hamburger and the dropdown becomes an accordion. */
/* The bar stays put while the page scrolls. Sticky goes on the wrapper that
   site.js fills, not on .nav: an element can only stick inside its parent,
   and .nav's parent is exactly its own height. */
#site-header { position: sticky; top: 0; z-index: 50; }
/* White bar with ink text and a brand button, as box.com's — so it reads as
   its own strip above every coloured band rather than merging into one. */
.nav { background: #fff; color: var(--ink); position: relative; border-bottom: 1px solid var(--line); }
.nav .in {
  max-width: 1400px; margin: 0 auto; padding: .95rem var(--pad);
  display: flex; align-items: center; gap: 2rem;
}
.logo {
  display: flex; align-items: center; gap: .6rem;
  color: var(--brand); text-decoration: none;
  font-weight: 900; font-size: 1.5rem; letter-spacing: -.03em; line-height: 1;
}
.logo svg { width: 1.6rem; height: 1.6rem; }

.menu { display: flex; align-items: center; gap: 2rem; flex: 1; }
.links {
  list-style: none; display: flex; gap: 2.2rem; margin-left: auto; margin-right: auto;
  font-size: 1.05rem; font-weight: 400; align-items: center;
}
.links > li { position: static; }
.links > li.has-sub { position: relative; }
.links a, .links .top {
  color: var(--ink); text-decoration: none; opacity: .95;
  background: none; border: 0; font: inherit; cursor: pointer; padding: .25rem 0;
  display: inline-flex; align-items: center; gap: .35rem;
}
.links a:hover, .links .top:hover, .links .top[aria-expanded="true"] { opacity: 1; }
.links > li > a:hover, .links > li > a[aria-current="page"] { text-decoration: underline; text-underline-offset: .4em; text-decoration-color: var(--brand); text-decoration-thickness: 2px; }
.top svg { width: .8rem; height: .8rem; transition: transform .15s ease; }
.top[aria-expanded="true"] svg { transform: rotate(180deg); }

/* the dropdown — a white card hanging under its label, like Box's */
.panel {
  display: none; position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%);
  width: 19rem;
  background: #fff; color: var(--ink);
  border-radius: 14px; box-shadow: 0 24px 60px -18px rgba(20,10,60,.45);
  overflow: hidden; margin-top: .6rem;
}
li.open > .panel { display: block; }
.panel .col { padding: .6rem; display: grid; gap: .15rem; }
.item {
  display: grid; grid-template-columns: 2.4rem 1fr; gap: .8rem; align-items: start;
  padding: .7rem .75rem; border-radius: 10px; text-decoration: none;
  opacity: 1 !important;
}
/* `.links a` paints nav links white; inside the panel the text must be ink */
.links .item, .links .item b { color: var(--ink); }
.item:hover { background: var(--tint); }
.item .ic { width: 2.4rem; height: 2.4rem; border-radius: 8px; background: var(--tint); display: grid; place-items: center; color: var(--brand); }
.item .ic svg { width: 1.3rem; height: 1.3rem; }
.item b { display: block; font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.item small { display: block; color: var(--muted); font-size: .9rem; margin-top: .15rem; line-height: 1.35; }

.actions { display: flex; gap: .75rem; align-items: center; }
.actions .pill { padding: .7rem 1.3rem; font-size: 1rem; }
.burger {
  display: none; margin-left: auto; background: none; border: 0; color: var(--ink);
  width: 2.6rem; height: 2.6rem; cursor: pointer; border-radius: 8px;
}
.burger svg { width: 1.6rem; height: 1.6rem; }
.burger:hover { background: var(--tint); }

@media (max-width: 960px) {
  .burger { display: grid; place-items: center; }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -24px rgba(20,10,60,.3); flex-direction: column; align-items: stretch;
    padding: .75rem var(--pad) 1.5rem; gap: .5rem; max-height: calc(100vh - 5rem); overflow-y: auto;
  }
  .nav.open .menu { display: flex; }
  .links { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  .links > li { border-bottom: 1px solid var(--line); }
  .links a, .links .top { width: 100%; padding: .9rem 0; justify-content: space-between; font-size: 1.15rem; }
  .panel { position: static; transform: none; width: auto; margin: 0 0 .75rem; border-radius: 12px; box-shadow: none; background: var(--tint); }
  .panel .col { padding: 1rem .75rem .5rem; }
  .actions { flex-direction: column; align-items: stretch; margin-top: .5rem; }
  .actions .pill { justify-content: center; }
}

/* ───────────── page scaffolding ───────────── */
.band {
  background: linear-gradient(120deg, var(--brand) 0%, var(--brand-vivid) 100%);
  color: var(--on-brand);
}
.band .in { max-width: calc(1100px + 2 * var(--pad)); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) var(--pad); }
.band h1 { font-weight: 900; font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
.band .lede { font-size: clamp(1.15rem, 2.4vw, 1.5rem); margin-top: 1rem; max-width: 40ch; opacity: .95; }

.section { padding: clamp(2.5rem, 6vw, 4.5rem) var(--pad); }
.section.tinted { background: var(--tint); }
.section .in { max-width: 1100px; margin: 0 auto; }
.section .in.narrow { max-width: 820px; }
.section h2 { font-weight: 900; font-size: clamp(1.8rem, 4vw, 2.7rem); }
.section h2.center { text-align: center; }
.section .sub { color: var(--muted); font-size: 1.15rem; margin-top: .8rem; }
.section .sub.center { text-align: center; margin-inline: auto; max-width: 56ch; }

.prose h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 2.5rem; }
.prose h3 { font-size: 1.25rem; font-weight: 900; margin-top: 1.8rem; }
.prose p, .prose li { margin-top: .7rem; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose code { font-family: var(--mono); font-size: .9em; background: var(--tint); padding: .1em .4em; border-radius: 4px; }
.prose .note {
  margin-top: 1rem; padding: .9rem 1.1rem; border-radius: 10px;
  background: var(--tint); border-left: 4px solid var(--brand); max-width: var(--measure);
}
.prose kbd {
  font-family: var(--font); font-size: .88em; font-weight: 700;
  background: #fff; border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 5px; padding: .05em .45em; white-space: nowrap;
}

.cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 2.5rem; }
.card[hidden] { display: none; }
.contact-intro { margin-top: 3rem; }
.contact-intro h2 { font-size: 1.8rem; font-weight: 900; margin: 0 0 .5rem; }
.contact-intro p { color: var(--muted); font-size: 1.1rem; line-height: 1.6; margin: 0; max-width: 40rem; }
.contact-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.6rem; }
.contact-list li { display: grid; grid-template-columns: 3.2rem 1fr; gap: 1.1rem; align-items: start; }
.contact-list .ic { width: 3.2rem; height: 3.2rem; border-radius: 12px; background: var(--tint); color: var(--brand); display: grid; place-items: center; }
.contact-list .ic svg { width: 1.5rem; height: 1.5rem; }
.contact-list h3 { font-size: 1.25rem; font-weight: 900; margin: .35rem 0 .35rem; }
.contact-list p { color: var(--muted); font-size: 1.05rem; line-height: 1.6; margin: 0; }
.contact-list a { color: inherit; text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.5rem;
  display: grid; gap: .6rem; align-content: start;
  box-shadow: 0 8px 24px -18px rgba(30,20,80,.35);
}
.card .ic { width: 2.6rem; height: 2.6rem; border-radius: 10px; background: var(--tint); color: var(--brand); display: grid; place-items: center; }
.card .ic svg { width: 1.4rem; height: 1.4rem; }
.card h3 { font-size: 1.2rem; font-weight: 900; }
.card p { color: var(--muted); font-size: 1rem; }
.card a.more { font-weight: 700; text-decoration: none; }
.card a.more:hover { text-decoration: underline; }

.scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; margin-top: 1.5rem; }
table { border-collapse: collapse; width: 100%; font-size: .98rem; }
th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); background: var(--tint); padding: .75rem 1rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: .75rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }

.cta-strip { text-align: center; }
.cta-strip .pill { margin-top: 1.5rem; }

/* ───────────── product window mock-ups ─────────────
   Drawn in CSS so they stay crisp at any size and never go stale the way a
   screenshot does. .stage holds two overlapping windows the way Box's hero
   does; .w-app is the Qdrive app, .w-finder is Finder with the Qdrive sidebar
   entry and sync badges. A .win can also stand on its own. */
  .stage { position: relative; height: clamp(22rem, 42vw, 34rem); align-self: end; }
  .win.solo { position: static; border-radius: 12px; width: auto; }
  .win {
    position: absolute; background: #fff; color: var(--ink);
    border-radius: 12px 12px 0 0; overflow: hidden;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.45);
    font-size: .8rem;
  }
  .win .bar { display: flex; align-items: center; gap: .4rem; padding: .6rem .8rem; background: #f3f2f8; border-bottom: 1px solid var(--line); }
  .win .bar i { width: .65rem; height: .65rem; border-radius: 50%; display: block; }
  .win .bar i:nth-child(1) { background: #ff5f57; } .win .bar i:nth-child(2) { background: #febc2e; } .win .bar i:nth-child(3) { background: #28c840; }
  .win .bar .t { margin-left: .5rem; color: var(--muted); font-weight: 700; }

  /* back window: the Qdrive app */
  .w-app { right: -6%; top: 0; width: 78%; }
  .w-app .body { display: grid; grid-template-columns: 9.5rem 1fr; }
  .w-app .side { background: var(--brand); color: #fff; padding: .9rem .6rem; display: grid; gap: .15rem; align-content: start; }
  .w-app .side .brand { font-weight: 900; font-size: 1.05rem; padding: .2rem .5rem .7rem; letter-spacing: -.02em; }
  .w-app .side .r { padding: .42rem .55rem; border-radius: 6px; display: flex; gap: .5rem; align-items: center; opacity: .85; }
  .w-app .side .r.on { background: rgba(255,255,255,.18); opacity: 1; font-weight: 700; }
  .w-app .side svg { width: .9rem; height: .9rem; }
  .w-app .main { padding: .9rem 1rem; display: grid; gap: .4rem; align-content: start; }
  .w-app .crumb { color: var(--muted); font-size: .78rem; margin-bottom: .3rem; }
  .w-app .crumb b { color: var(--ink); }
  .w-app .hd, .w-app .row { display: grid; grid-template-columns: 1.1rem 1fr 6.5rem 5rem; gap: .6rem; align-items: center; padding: .38rem .5rem; }
  .w-app .hd { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid var(--line); }
  .w-app .row:nth-child(even) { background: var(--tint); border-radius: 6px; }
  .w-app .row svg { width: 1rem; height: 1rem; }
  .w-app .row .m { color: var(--muted); font-size: .74rem; }
  .st { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 700; }
  .st i { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; }
  .st.ok { color: #0f7b3d; } .st.ok i { background: #22c55e; }
  .st.sync { color: var(--brand); } .st.sync i { background: var(--brand); }

  /* front window: Finder, with the Qdrive sidebar entry and badges */
  .w-finder { left: -4%; bottom: 0; width: 64%; }
  .w-finder .body { display: grid; grid-template-columns: 8rem 1fr; min-height: 13rem; }
  .w-finder .side { background: #f6f5fa; border-right: 1px solid var(--line); padding: .7rem .5rem; display: grid; gap: .05rem; align-content: start; }
  .w-finder .side .h { font-size: .62rem; color: var(--muted); font-weight: 700; padding: .3rem .45rem .15rem; }
  .w-finder .side .r { display: flex; gap: .4rem; align-items: center; padding: .28rem .45rem; border-radius: 5px; color: #333; }
  .w-finder .side .r.on { background: #dcd7f6; color: var(--ink); font-weight: 700; }
  .w-finder .side svg { width: .85rem; height: .85rem; }
  .win .grid { padding: .9rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem .5rem; align-content: start; }
  .win .file { display: grid; justify-items: center; gap: .3rem; text-align: center; font-size: .68rem; line-height: 1.15; position: relative; }
  .win .file svg.doc { width: 2.4rem; height: 2.4rem; }
  .win .badge {
    position: absolute; right: 12%; top: 1.45rem; width: .95rem; height: .95rem; border-radius: 50%;
    background: #fff; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.3);
  }
  .win .badge svg { width: .75rem; height: .75rem; }


  /* Windows File Explorer: title left, window controls right, nav pane, details list */
  .w-explorer .bar { background: #fff; }
  .w-explorer .bar i { display: none; }
  .w-explorer .bar .t { margin-left: 0; }
  .w-explorer .bar .ctl { margin-left: auto; display: flex; gap: 1.1rem; color: var(--muted); font-size: .8rem; }
  .w-explorer .body { display: grid; grid-template-columns: 8.5rem 1fr; min-height: 13rem; }
  .w-explorer .navp { background: #f7f7fb; border-right: 1px solid var(--line); padding: .6rem .4rem; display: grid; gap: .05rem; align-content: start; }
  .w-explorer .navp .r { display: flex; gap: .45rem; align-items: center; padding: .3rem .5rem; border-radius: 4px; font-size: .78rem; color: #333; }
  .w-explorer .navp .r.on { background: #e5e1fb; color: var(--ink); font-weight: 700; }
  .w-explorer .navp svg { width: .9rem; height: .9rem; }
  .w-explorer .navp .sub { padding-left: 1.6rem; color: var(--muted); }
  .w-explorer .list { padding: .5rem .6rem; display: grid; gap: .05rem; align-content: start; }
  .w-explorer .list .hd, .w-explorer .list .row { display: grid; grid-template-columns: 1.1rem 1fr 2.6rem 6rem 4.2rem; gap: .5rem; align-items: center; padding: .34rem .5rem; font-size: .76rem; }
  .w-explorer .list .hd { color: var(--muted); border-bottom: 1px solid var(--line); font-size: .68rem; }
  .w-explorer .list .row:nth-child(even) { background: #f7f7fb; border-radius: 4px; }
  .w-explorer .list .row svg { width: 1rem; height: 1rem; }
  .w-explorer .list .row .m { color: var(--muted); }
  .w-explorer .list .cloud { width: 1.05rem; height: 1.05rem; justify-self: center; }

  /* the app's Activity view: a feed of what just happened */
  .w-app .feed { padding: .9rem 1rem; display: grid; gap: .35rem; align-content: start; }
  .w-app .feed .ev { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: .6rem; align-items: center; padding: .45rem .5rem; border-radius: 6px; }
  .w-app .feed .ev:nth-child(even) { background: var(--tint); }
  .w-app .feed .ev .dot { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: #e6f6ec; color: var(--ok); }
  .w-app .feed .ev .dot.sync { background: #ece7fd; color: var(--brand); }
  .w-app .feed .ev .dot svg { width: .9rem; height: .9rem; }
  .w-app .feed .ev b { display: block; font-size: .8rem; }
  .w-app .feed .ev small { color: var(--muted); font-size: .7rem; }
  .w-app .feed .ev .m { color: var(--muted); font-size: .72rem; white-space: nowrap; }

  @media (max-width: 900px) {
    .stage { height: 20rem; }
    .w-app { width: 92%; right: -10%; }
    .w-finder { width: 70%; left: -6%; }
  }

/* ───────────── footer — the box.com band ─────────────
   Pure black. A brand block on the left, then fixed-width columns packed
   together (not stretched across the page), each with a bold white heading
   underlined by a hairline rule and grey links beneath. */
footer.site { background: #000; color: #b3b3b3; padding: clamp(3rem, 6vw, 4.5rem) var(--pad) clamp(3rem, 6vw, 4.5rem); }
footer.site .in { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(14rem, 18rem) 1fr; gap: 3rem clamp(2rem, 4vw, 4rem); align-items: start; }
footer.site .brand .logo { display: inline-flex; align-items: center; gap: .5rem; color: #fff; font-weight: 900; font-size: 1.5rem; text-decoration: none; }
footer.site .brand .logo svg { width: 1.6rem; height: 1.6rem; }
footer.site .brand p { margin-top: 1rem; font-size: 1rem; line-height: 1.55; color: #8c8c8c; max-width: 26ch; }
footer.site .cols { display: grid; grid-template-columns: repeat(4, minmax(0, 12rem)); gap: 2.5rem 2rem; }
footer.site h5 { color: #fff; font-size: 1.15rem; font-weight: 700; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid #3a3a3a; }
footer.site ul { list-style: none; display: grid; gap: .8rem; }
footer.site a { color: #b3b3b3; text-decoration: none; font-size: 1rem; line-height: 1.4; transition: color .15s; }
footer.site a:hover { color: #fff; }
footer.site a.contact { display: inline-flex; align-items: center; gap: .5rem; text-decoration: underline; text-underline-offset: .2em; }
footer.site a.contact svg { width: 1.1em; height: 1.1em; flex: none; }
footer.site a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; box-shadow: none; }

@media (max-width: 860px) {
  footer.site .in { grid-template-columns: 1fr; gap: 2.5rem; }
  footer.site .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  footer.site .cols { grid-template-columns: 1fr; }
}

/* ───────────── per-platform pictures ─────────────
   Anything marked .os-mac shows to Mac visitors, .os-win to Windows visitors
   (html[data-os] is set by site.js). With no platform known, the Mac version
   shows. Window mock-ups also swap their title bar: traffic lights on a Mac,
   – ▢ ✕ on Windows. */
.os-win { display: none !important; }
html[data-os="win"] .os-win { display: revert !important; }
html[data-os="win"] .os-mac { display: none !important; }
html[data-os="win"] .win .bar { background: #fff; }
html[data-os="win"] .win .bar i { display: none; }
html[data-os="win"] .win .bar .t { margin-left: 0; }
html[data-os="win"] .win .bar::after { content: "\2013\2003\25A1\2003\2715"; margin-left: auto; color: var(--muted); font-size: .8rem; letter-spacing: .05em; }
html[data-os="win"] .win .bar .ctl { display: none; }

/* ───────────── legal pages — laid out like box.com/legal ─────────────
   A solid brand banner with a big centred title and the effective date, then
   a sticky section list on the left and the text on the right. */
.legal-band { background: var(--brand); color: var(--on-brand); text-align: center; }
.legal-band .in { max-width: calc(1100px + 2 * var(--pad)); margin: 0 auto; padding: clamp(4rem, 10vw, 8.5rem) var(--pad); }
.legal-band h1 { font-weight: 900; font-size: clamp(2.4rem, 5vw, 3.8rem); letter-spacing: -.01em; }
.legal-band .date { font-size: clamp(1.05rem, 2vw, 1.4rem); margin-top: clamp(1.5rem, 4vw, 3rem); opacity: .95; }

.legal { padding: clamp(2.5rem, 6vw, 4.5rem) var(--pad) clamp(3rem, 8vw, 6rem); }
.legal .in { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.legal nav { position: sticky; top: 5.5rem; }
.legal nav ul { list-style: none; display: grid; gap: 1.1rem; }
.legal nav a { color: var(--ink); text-decoration: none; font-size: 1.05rem; line-height: 1.35; }
.legal nav a:hover, .legal nav a.on { color: var(--brand); }
.legal article { font-size: 1.12rem; line-height: 1.7; max-width: 72ch; }
.legal article h2 { font-weight: 700; font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 3rem; scroll-margin-top: 6rem; }
.legal article h2:first-of-type { margin-top: 0; }
.legal article .opening { scroll-margin-top: 6rem; }
.legal article .opening p { font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.6; color: var(--muted); }
.legal article .opening p:first-child { margin-top: 0; }
.legal article .opening + h2 { margin-top: 3.5rem; }
.legal article h3 { font-weight: 700; font-size: 1.2rem; margin-top: 1.75rem; }
.legal article p, .legal article li { margin-top: .9rem; color: #2f2f3f; }
.legal article ul { padding-left: 1.4rem; }
.legal article a { color: var(--brand); font-weight: 700; text-decoration: none; }
.legal article a:hover { text-decoration: underline; }
@media (max-width: 860px) {
  .legal .in { grid-template-columns: 1fr; }
  .legal nav { position: static; border-bottom: 1px solid var(--line); padding-bottom: 1.5rem; }
  .legal nav ul { gap: .7rem; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } html { scroll-behavior: auto; } }