/* Mirror, the content property.
   Tokens are lifted straight out of Mirror/DesignSystem/MirrorColor.swift and
   the type + space scale is the one native-dev.com already uses, so the app,
   the studio page and this site read as one thing.
   Every value here has a counterpart in the app. Do not invent a colour. */

:root{
  color-scheme: light dark;

  /* surfaces */
  --paper:#F6F9FB; --surface:#FFFFFF; --tint:#EDF1F5; --line:#E0E7EE;

  /* ink */
  --ink:#242B45; --ink-2:#5A6580; --caption:#464F68;

  /* the four tones. accent ink for chips and short bold phrases,
     reading ink for a sentence set on that tone's own tint. */
  --ice:#9CDCE8;  --ice-deep:#249DB2; --ice-ink:#157283; --ice-tint:#DAF5F9; --ice-read:#0F5865;
  --blue:#A5B3E9; --blue-deep:#6077D4; --blue-ink:#3955C6; --blue-tint:#E8ECFA; --blue-read:#2D45A8;
  --lime:#E1E87D; --lime-deep:#CFD72A; --lime-ink:#6C7306; --lime-tint:#F9FAE8; --lime-read:#545904;
  --pink:#F994B8; --pink-deep:#EC1864; --pink-ink:#B5164E; --pink-tint:#FFD1E4; --pink-read:#86163D;
  --girl:#D0165A;

  /* the one gradient that means "do the thing" */
  --cta-a:#5069CC; --cta-b:#E01059;

  /* surfaces that stay dark in both schemes */
  --dark:#121729; --dark-2:#2E3852; --on-dark:#EAF0FA; --on-dark-2:#9AA6C4;

  --accent:var(--blue-ink);

  /* type scale, shared with native-dev.com */
  --t-hero:clamp(2.6rem,1.5rem + 5.4vw,5.5rem);
  --t-h2:clamp(1.9rem,1.3rem + 3vw,3.5rem);
  --t-h3:clamp(1.3rem,1.12rem + .85vw,1.85rem);
  --t-lead:clamp(1.05rem,.98rem + .5vw,1.4rem);
  --t-cap:.8125rem;

  /* space scale, shared with native-dev.com */
  --s-1:clamp(.5rem,.45rem + .2vw,.75rem);
  --s-2:clamp(1rem,.9rem + .4vw,1.5rem);
  --s-3:clamp(1.5rem,1.3rem + .9vw,2.5rem);
  --s-4:clamp(2.5rem,2rem + 2.2vw,5rem);
  --s-5:clamp(4rem,3rem + 4.5vw,9rem);

  /* radii, straight from MirrorRadius */
  --r-sm:12px; --r-tile:14px; --r-note:16px; --r-card:20px; --r-lg:24px; --r-hero:26px;

  --shadow:0 1px 2px rgba(36,43,69,.04),0 8px 24px rgba(36,43,69,.07);
  --shadow-lift:0 2px 6px rgba(36,43,69,.06),0 22px 50px rgba(36,43,69,.13);
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#121729; --surface:#1A2138; --tint:#232B45; --line:#2E3852;
    --ink:#EAF0FA; --ink-2:#9AA6C4; --caption:#9AA6C4;
    --ice-ink:#9CDCE8; --ice-tint:#123642; --ice-read:#BEEAF2;
    --blue-ink:#A5B3E9; --blue-tint:#1E2A54; --blue-read:#C6D0F3;
    --lime-ink:#E1E87D; --lime-tint:#2E3312; --lime-read:#EBF0AA;
    --pink-ink:#F994B8; --pink-tint:#3E1228; --pink-read:#FBBDD3;
    --girl:#F994B8;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
    --shadow-lift:0 2px 6px rgba(0,0,0,.35),0 22px 50px rgba(0,0,0,.5);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}

.display,h1,h2,h3,.t-hero{
  font-family:"Parkinsans",-apple-system,BlinkMacSystemFont,sans-serif;font-weight:800;
  letter-spacing:-.022em;text-wrap:balance;
}
h1{font-size:var(--t-hero);line-height:1.02;letter-spacing:-.028em;margin:0}
h2{font-size:var(--t-h2);line-height:1.06;margin:0}
h3{font-size:var(--t-h3);line-height:1.16;letter-spacing:-.014em;margin:0}

.eyebrow{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;
  font-size:var(--t-cap);font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent);margin:0 0 var(--s-1);
}
.lead{font-size:var(--t-lead);line-height:1.45;color:var(--ink-2);max-width:42ch;margin:var(--s-2) 0 0}
.fine,.muted{font-size:var(--t-cap);line-height:1.5;color:var(--ink-2)}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.18em}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;background:var(--surface);padding:10px 16px;border-radius:999px;z-index:99}

/* shell */
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.wrap--read{max-width:720px}

nav.top{position:sticky;top:0;z-index:40;backdrop-filter:saturate(1.6) blur(14px);
  background:color-mix(in srgb,var(--paper) 82%,transparent);border-bottom:1px solid transparent}
nav.top .in{max-width:1120px;margin:0 auto;padding:14px clamp(20px,4vw,40px);display:flex;gap:22px;align-items:center}
nav.top .brand{font-family:"Parkinsans",-apple-system,BlinkMacSystemFont,sans-serif;font-weight:800;font-size:20px;color:var(--ink);letter-spacing:-.02em}
nav.top .brand:hover{text-decoration:none}
nav.top .spacer{flex:1}
nav.top a.lnk{font-size:14px;font-weight:600;color:var(--ink-2)}
nav.top a.lnk:hover{color:var(--ink);text-decoration:none}
nav.top .pill{font-size:14px;font-weight:700;color:#fff;
  background-image:linear-gradient(90deg,var(--cta-a),var(--cta-b),var(--cta-a));
  background-size:180% 100%;background-position:0 0;
  padding:9px 18px;border-radius:999px;white-space:nowrap;
  transition:background-position 300ms cubic-bezier(.645,.045,.355,1),transform 120ms cubic-bezier(.165,.84,.44,1)}
nav.top .pill:hover{text-decoration:none;background-position:60% 0}
nav.top .pill:active{transform:scale(.975)}
nav.top .pill .cta-ico{display:none}
@media(max-width:640px){nav.top a.lnk{display:none}}

/* chips, lifted from MirrorChip */
.chip{display:inline-block;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;white-space:nowrap;line-height:1.25}
.chip.sm{font-size:11px;padding:4px 9px}
.chip.ice{background:var(--ice-tint);color:var(--ice-ink)}
.chip.blue{background:var(--blue-tint);color:var(--blue-ink)}
.chip.lime{background:var(--lime-tint);color:var(--lime-ink)}
.chip.pink{background:var(--pink-tint);color:var(--pink-ink)}
.chip.neutral{background:var(--tint);color:var(--caption)}
.chip.outline{background:transparent;border:1px solid var(--line);color:var(--caption)}

/* reading pages */
header.hero{max-width:720px;margin:0 auto;padding:var(--s-4) clamp(20px,4vw,40px) var(--s-1)}
header.hero h1{font-size:clamp(2rem,1.4rem + 2.6vw,3rem);line-height:1.06}
header.hero p.lede{margin:16px 0 0;font-size:var(--t-lead);color:var(--ink-2)}
.wrap article h2{font-size:clamp(1.4rem,1.2rem + .9vw,1.85rem);margin:var(--s-3) 0 10px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:20px 22px;margin:18px 0;box-shadow:var(--shadow)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:20px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:18px 20px;display:block;color:var(--ink);transition:border-color .18s,transform .18s}
.tile:hover{text-decoration:none;border-color:var(--blue-deep);transform:translateY(-2px)}
.tile .t{font-weight:700;font-size:16px;display:block;margin-bottom:5px}
.tile .m{font-size:13px;color:var(--caption);display:block}
.note{border-left:3px solid var(--blue-deep);background:var(--blue-tint);border-radius:0 var(--r-note) var(--r-note) 0;padding:14px 18px;margin:22px 0;color:var(--blue-read)}
.note strong{color:var(--blue-ink)}
.disclosure{background:var(--lime-tint);color:var(--lime-read);border-radius:var(--r-note);padding:14px 18px;margin:22px 0;font-size:14px}
.disclosure a{color:var(--lime-ink)}
article p{margin:14px 0}
article ul{margin:14px 0;padding-left:22px}
article li{margin:7px 0}

footer{border-top:1px solid var(--line);margin-top:var(--s-5);padding:var(--s-3) 0 var(--s-4);color:var(--caption);font-size:13px}
footer .in{max-width:1120px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
footer a{color:var(--caption)}
footer .rows{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
footer .rule{margin:0 0 14px;font-family:"Parkinsans",-apple-system,BlinkMacSystemFont,sans-serif;font-weight:800;font-size:17px;color:var(--ink)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------------------------------------------------------------- wordmark */
/* Two SVGs, one per scheme. An inline SVG cannot restyle its own strokes on a
   scheme change without custom properties on every element, and this is
   smaller than that. */
.wm-lockup{display:inline-flex;align-items:center;line-height:0}
.wm-lockup .wm--dark{display:none}
@media (prefers-color-scheme: dark){
  .wm-lockup .wm--light{display:none}
  .wm-lockup .wm--dark{display:inline}
}
nav.top .brand{display:inline-flex;align-items:center;padding:2px 0}
nav.top .brand:hover{text-decoration:none;opacity:.82}
footer .rule{display:flex;line-height:0;margin:0 0 18px}

/* ------------------------------------------------------------ legal pages */
.doc-head{padding:var(--s-4) 0 0}
.doc-head h1{font-size:clamp(2rem,1.5rem + 2.2vw,3rem);line-height:1.05;margin:0}
.doc-pill{display:inline-block;margin:16px 0 0;font-size:12.5px;font-weight:700;
  background:var(--blue-tint);color:var(--blue-ink);padding:7px 14px;border-radius:999px}
.doc-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;padding-bottom:var(--s-2);
  border-bottom:1px solid var(--line)}
.doc-tab{font-size:13.5px;font-weight:600;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:8px 15px}
.doc-tab:hover{text-decoration:none;color:var(--ink);border-color:var(--blue-deep)}
.doc-tab.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}

.doc{padding-top:var(--s-2)}
.doc-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px 22px;
  margin:0 0 var(--s-2);padding:18px 20px;background:var(--tint);border-radius:var(--r-note)}
.doc-meta div{margin:0}
.doc-meta dt{font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:4px}
.doc-meta dd{margin:0;font-size:13.5px;line-height:1.45}

.callout{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--blue-deep);
  border-radius:0 var(--r-note) var(--r-note) 0;padding:18px 20px;margin:14px 0;font-size:15.5px;line-height:1.55}
.callout--note{border-left-color:var(--lime-deep);background:var(--lime-tint);color:var(--lime-read);border-color:transparent}
.callout--note strong{color:var(--lime-ink)}

.doc-toc{margin:var(--s-2) 0 var(--s-3);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-note);padding:14px 18px}
.doc-toc summary{cursor:pointer;font-weight:700;font-size:14px;color:var(--ink)}
.doc-toc ol{margin:12px 0 4px;padding-left:22px;columns:2;column-gap:28px}
.doc-toc li{font-size:13.5px;margin:5px 0;break-inside:avoid}
@media(max-width:560px){.doc-toc ol{columns:1}}

.doc-sec{margin-top:var(--s-3);scroll-margin-top:80px}
.doc-sec h2{display:flex;gap:12px;align-items:baseline;font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem);
  line-height:1.2;margin:0 0 10px}
.doc-num{flex:none;font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:12.5px;
  font-weight:800;color:var(--blue-ink);background:var(--blue-tint);border-radius:999px;
  min-width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  letter-spacing:0;position:relative;top:-2px}
.doc-sec p{margin:12px 0;font-size:15.5px;line-height:1.6}
.doc-sec ul{margin:12px 0;padding-left:22px}
.doc-sec li{margin:8px 0;font-size:15.5px;line-height:1.55}
.doc-sec code{font-size:13.5px;background:var(--tint);padding:2px 6px;border-radius:6px}
.doc-sec p.caps{font-size:13px;line-height:1.6;letter-spacing:.01em;background:var(--tint);
  border-radius:var(--r-note);padding:16px 18px}

.doc-table-wrap{overflow-x:auto;margin:16px 0;border:1px solid var(--line);border-radius:var(--r-note)}
.doc-table{border-collapse:collapse;width:100%;min-width:600px;table-layout:fixed;font-size:13.5px;background:var(--surface)}
.doc-table col.c1{width:23%}.doc-table col.c2{width:42%}.doc-table col.c3{width:35%}
.doc-table th{text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.doc-table td{padding:13px 14px;vertical-align:top;line-height:1.5;border-bottom:1px solid var(--tint)}
.doc-table tr:last-child td{border-bottom:0}
.doc-table td:first-child{font-weight:600;white-space:nowrap}
@media(max-width:640px){.doc-table td:first-child{white-space:normal}}

.doc-closing{margin-top:var(--s-3);padding:18px 20px;background:var(--ice-tint);color:var(--ice-read);
  border-radius:var(--r-note);font-size:15px;line-height:1.55}
.doc-closing strong{color:var(--ice-ink)}