/* Surge — shared legal document template (/terms, /privacy). Back matter of the site:
   grid + type only, no imagery, no cards. */
:root{--bar:56px}
a{color:var(--white);text-decoration:none}
a:hover{color:var(--white)}
.top-bar{position:fixed;top:0;left:0;right:0;height:var(--bar);display:flex;align-items:center;justify-content:space-between;padding:0 48px;background:var(--black);z-index:20}
.top-bar img{height:18px;display:block}
.top-nav{display:flex;gap:28px}
.top-nav a{color:var(--text-secondary)}
.top-nav a:hover,.top-nav a[aria-current]{color:var(--white)}
/* mobile nav matches the home page: row suppressed below 860, marks move into a hairline drawer */
.nav-toggle{display:none;background:none;border:0;padding:0 2px;color:var(--text-secondary);cursor:pointer;font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase}
.nav-toggle:hover,.nav-toggle[aria-expanded="true"]{color:var(--white)}
.nav-drawer{display:none}
.doc{margin-top:var(--bar);padding-bottom:110px}
.g{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:0 48px}
/* --- header block: title, hairline, plate caption --- */
.top{border-top:1px solid var(--hairline);padding-top:16px;margin-bottom:64px}
.top .ds-index{grid-column:9/13;text-align:right;color:var(--text-tertiary)}
.head{align-items:end;margin-bottom:26px}
.head h1{grid-column:1/9;margin:0;font-size:clamp(38px,5.4vw,76px);line-height:.94;letter-spacing:-.03em}
.head .ghost{grid-column:9/13;text-align:right;font-family:var(--font-display-flat);font-weight:var(--weight-ultralight);font-size:clamp(48px,6.5vw,104px);line-height:.8;letter-spacing:-.03em;color:var(--grey-30)}
.caption{border-top:1px solid var(--hairline-strong);padding-top:14px;margin-bottom:76px}
.caption div{display:flex;flex-direction:column;gap:6px}
.caption div:nth-child(1){grid-column:1/4}
.caption div:nth-child(2){grid-column:4/7}
.caption div:nth-child(3){grid-column:7/10}
.caption div:nth-child(4){grid-column:10/13;text-align:right}
.caption .k{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--grey-30)}
.caption .v{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-secondary)}
/* --- two columns: sticky index, held void, body --- */
.index{grid-column:1/3;position:sticky;top:calc(var(--bar) + 32px);align-self:start;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--hairline);padding-top:12px;max-height:calc(100vh - var(--bar) - 64px);overflow:auto}
.index > span{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--grey-30);margin-bottom:12px}
.index a{display:flex;gap:10px;padding:5px 0;font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-tertiary);line-height:1.4;transition:color 120ms linear}
.index a i{font-style:normal;color:var(--grey-30);flex:none}
.index a:hover,.index a.on{color:var(--white)}
.index a.on i{color:var(--white)}
.body{grid-column:5/12;max-width:72ch}
section{padding-top:52px}
section:first-child{padding-top:0}
section > .n{display:block;font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--grey-30);margin-bottom:12px}
section h2{margin:0 0 14px;font-size:clamp(20px,1.7vw,26px);line-height:1.05;letter-spacing:-.02em}
section h2 + .rule{border-top:1px solid var(--hairline);margin-bottom:22px}
.body p{margin:0 0 16px;font-size:var(--text-body);line-height:var(--leading-body);color:var(--text-secondary);text-wrap:pretty}
.body p:last-child{margin-bottom:0}
.body strong{color:var(--white);font-weight:inherit}
.body a{border-bottom:1px solid var(--hairline);transition:border-color 120ms linear}
.body a:hover{border-bottom-color:var(--white)}
/* placeholders stay visible and findable */
.ph{font-family:var(--font-mono);font-size:.9em;letter-spacing:.04em;color:var(--white);border-bottom:1px dashed var(--hairline-strong);white-space:nowrap}
/* lists: bracket marker, hanging indent */
.body ul{list-style:none;margin:0 0 16px;padding:0}
.body li{position:relative;padding-left:26px;margin-bottom:10px;font-size:var(--text-body);line-height:var(--leading-body);color:var(--text-secondary);text-wrap:pretty}
.body li::before{content:"—";position:absolute;left:0;top:0;font-family:var(--font-mono);font-size:var(--text-micro);line-height:calc(var(--leading-body) * 1.25);color:var(--grey-30)}
.addr{margin:0 0 16px;font-size:var(--text-body);line-height:var(--leading-body);color:var(--text-secondary)}
/* --- data table: hairlines only --- */
table{width:100%;border-collapse:collapse;margin:0 0 16px}
th{text-align:left;font-family:var(--font-mono);font-weight:400;font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--grey-30);padding:0 24px 10px 0;border-bottom:1px solid var(--hairline-strong);vertical-align:bottom}
th:last-child{padding-right:0}
td{padding:14px 24px 14px 0;border-bottom:1px solid var(--hairline);font-size:14px;line-height:1.55;color:var(--text-secondary);vertical-align:top}
td:last-child{padding-right:0}
td:first-child{color:var(--white);width:52%}
.docfoot{border-top:1px solid var(--hairline-strong);margin-top:72px;padding-top:16px;display:flex;justify-content:space-between;gap:24px}
.docfoot span,.docfoot a{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-tertiary)}
.docfoot a:hover{color:var(--white)}
footer{border-top:1px solid var(--hairline);padding:40px 48px 44px;display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
footer nav{display:flex;flex-direction:column;gap:7px}
footer .nav-a{grid-column:1/4}
footer .nav-b{grid-column:5/8}
footer .nav-c{grid-column:9/12}
footer a,footer span{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-tertiary)}
footer a{border-bottom:1px solid transparent;transition:color 120ms linear,border-color 120ms linear;width:fit-content}
footer a:hover{color:var(--white);border-bottom-color:var(--white)}
@media (prefers-reduced-motion:reduce){.index a,footer a,.body a{transition:none}}
@media (max-width:1180px){.body{grid-column:4/13}}
@media (max-width:860px){
.top-bar{padding:0 16px}.top-nav{display:none}
.nav-toggle{display:flex;align-items:center;min-height:44px;min-width:44px;justify-content:flex-end}
.nav-drawer{position:fixed;top:var(--bar);left:0;right:0;z-index:19;display:none;flex-direction:column;background:var(--black);border-bottom:1px solid var(--hairline)}
.nav-drawer.open{display:flex}
.nav-drawer a{display:flex;align-items:center;min-height:48px;padding:0 16px;color:var(--text-secondary);border-top:1px solid var(--hairline)}
.nav-drawer a:first-child{border-top:0}
.nav-drawer a[aria-current]{color:var(--white)}
.nav-drawer a:active{background:var(--white);color:var(--black)}
.g{grid-template-columns:repeat(4,1fr);gap:12px;padding:0 16px}
.caption div:nth-child(1),.caption div:nth-child(2){grid-column:span 2}
.caption div:nth-child(3),.caption div:nth-child(4){grid-column:span 2;margin-top:14px}
.caption div:nth-child(4){text-align:left}
.caption{margin-bottom:44px}
.index{grid-column:1/5;position:static;max-height:none;overflow:visible;margin-bottom:44px}
.index details{border-top:0}
.body{grid-column:1/5;max-width:none}
section{padding-top:40px}
/* table stacks into label/value pairs */
table,tbody,tr,td{display:block;width:100%}
thead{display:none}
tr{border-bottom:1px solid var(--hairline);padding:14px 0}
td{border:0;padding:0}
td:first-child{width:auto;margin-bottom:6px}
td:last-child::before{content:"[LAWFUL BASIS] ";font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);color:var(--grey-30)}
.docfoot{flex-direction:column;gap:10px}
footer{padding:32px 16px 36px}
footer .nav-a,footer .nav-b,footer .nav-c{grid-column:span 4}
footer .nav-b,footer .nav-c{margin-top:18px}
}