/* ==========================================================
   Shared layout for the legal pages (privacy, terms).
   Deliberately plain: one readable column, no motion, no
   images. Colour, type and spacing all come from tokens.css,
   so these pages stay in the same system as the marketing
   pages without carrying their ~1,000 lines of CSS.
   ========================================================== */
body{background:var(--white);color:var(--ink)}
::selection{background:rgba(59,95,217,.18)}

.lg-wrap{max-width:76ch;margin:0 auto;padding:var(--s10) var(--gutter) var(--s20)}

.lg-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
        flex-wrap:wrap;padding-bottom:var(--s8);border-bottom:1px solid var(--slate-200)}
.lg-back{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--track-wider);
         text-transform:uppercase;color:var(--slate-500);text-decoration:none;
         transition:color var(--dur-hover) var(--ease-out)}
.lg-back:hover{color:var(--ink)}
.lg-eff{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--track-wide);
        color:var(--slate-500)}

.lg-wrap h1{font-family:var(--font-display);font-size:clamp(32px,5vw,46px);font-weight:600;
            letter-spacing:var(--track-tight);line-height:1.1;margin:var(--s12) 0 var(--s5)}
.lg-lede{font-size:19px;line-height:var(--lead-body);color:var(--slate-600);margin-bottom:var(--s12)}

.lg-wrap h2{font-family:var(--font-display);font-size:22px;font-weight:600;
            letter-spacing:var(--track-snug);line-height:var(--lead-heading);
            margin:var(--s12) 0 var(--s4);padding-top:var(--s6);
            border-top:1px solid var(--slate-100)}
.lg-wrap h2:first-of-type{border-top:0;padding-top:0}
.lg-wrap h3{font-size:16px;font-weight:600;margin:var(--s6) 0 var(--s2)}
.lg-wrap p{font-size:16px;line-height:1.65;color:var(--slate-700);margin-bottom:var(--s4)}
.lg-wrap ul{margin:0 0 var(--s4) 0;padding-left:var(--s5);list-style:none}
.lg-wrap li{font-size:16px;line-height:1.65;color:var(--slate-700);margin-bottom:var(--s3);
            position:relative}
.lg-wrap li::before{content:"";position:absolute;left:calc(-1 * var(--s4));top:.62em;
                    width:5px;height:5px;border-radius:50%;background:var(--slate-300)}
.lg-wrap a{color:var(--blue)}
.lg-wrap strong{font-weight:600;color:var(--ink)}

/* The address block is the reason several of these sections exist, so it is set
   as an addressable unit rather than run into a paragraph. */
.lg-addr{margin:var(--s5) 0 var(--s4);padding:var(--s6);border-radius:var(--r-lg);
         background:var(--slate-50);border:1px solid var(--slate-200);
         font-style:normal;line-height:1.7;font-size:16px;color:var(--slate-700)}
.lg-addr b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}

.lg-note{margin-top:var(--s10);padding:var(--s5);border-radius:var(--r-md);
         background:var(--slate-50);border:1px solid var(--slate-200);
         font-size:14px;line-height:1.6;color:var(--slate-600)}

.lg-foot{margin-top:var(--s16);padding-top:var(--s6);border-top:1px solid var(--slate-200);
         display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
         font-family:var(--font-mono);font-size:11px;letter-spacing:var(--track-wide);
         color:var(--slate-500)}
.lg-foot a{color:var(--slate-500);text-decoration:none}
.lg-foot a:hover{color:var(--ink)}

@media (max-width:640px){
  .lg-wrap{padding-top:var(--s8)}
  .lg-wrap h1{margin-top:var(--s8)}
  .lg-lede{font-size:17px;margin-bottom:var(--s10)}
}