/*
 * THE LEGAL PAGES: a navy masthead, then prose on white.
 *
 * Four pages share this sheet -- privacy, terms, community guidelines and
 * account deletion -- and nothing here is specific to any one of them. The
 * chrome around it (nav, footer, colours, buttons) is in site.css.
 *
 * These pages are read when something is wrong, or when a store reviewer is
 * checking that they exist, so the whole design is in service of one thing:
 * being legible. Long measure is the enemy, so the column is capped at 760,
 * the leading is generous, and every section gets a Yellow tick above it so a
 * reader scanning for section 7 can find section 7.
 */

/*
 * EMBED MODE: the same page, dressed for the inside of the app.
 *
 * app/WebPagesScreen.js opens these two documents in a WebView that already
 * has the app's own header above it and 20pt of padding down each side. The
 * web page's fixed nav, its Download button and its footer full of store links
 * are all wrong in there: the reader is already in the app. `?embed=1` drops
 * every one of them and leaves the document, on white, starting at its title.
 *
 * It is one file and one set of words either way, deliberately: a second copy
 * of a privacy policy is a copy that goes stale on the day it matters.
 */
.embed .nav,
.embed footer{display:none;}
.embed body{background:var(--white);}
.embed .legal-head{background:var(--white);padding:30px 0 0;}
.embed .legal-head h1{color:var(--navy);font-size:clamp(25px,6vw,30px);}
.embed .legal-head .date{color:var(--gray);margin-top:12px;}
.embed .legal{padding:18px 0 48px;}
/* The app supplies the side margin, so the page must not add its own. */
.embed .wrap{padding:0;}
/*
 * Smaller than the website, and on flat white (Guy, 2026-09-08). Legal text in
 * a phone sized WebView is read in one narrow column with the app's chrome
 * above it, so website sizing turns every paragraph into a wall. The grey card
 * around the address goes too: one unbroken white page reads as part of the
 * app, a panel floating on it reads as a web page someone embedded.
 */
.embed .prose{font-size:14.5px;line-height:1.75;}
.embed .prose > .lead{font-size:15.5px;line-height:1.7;}
.embed .legal-head h1{font-size:clamp(21px,5.2vw,25px);}
.embed .legal-head .date{font-size:12.5px;margin-top:10px;}
.embed .prose h2{margin:36px 0 12px;font-size:17px;}
.embed .prose h2::before{width:22px;height:2px;margin-bottom:12px;}
.embed .prose h3{margin:22px 0 6px;font-size:14.5px;}
.embed .prose p{margin-bottom:13px;}
.embed .prose li{margin-bottom:7px;padding-left:20px;}
.embed .contact{
  margin-top:38px;padding:20px 0 0;border-radius:0;background:transparent;
  border-top:1px solid #ECEDF4;
}
.embed .contact p{font-size:14px;}

.legal-head{background:var(--navy);padding:148px 0 60px;}
.legal-head h1{
  margin:0;color:var(--white);font-weight:500;
  font-size:clamp(30px,5vw,46px);line-height:1.15;letter-spacing:-.4px;
}
.legal-head .date{margin:18px 0 0;color:var(--lav);font-weight:300;font-size:14px;}

.legal{background:var(--white);padding:68px 0 100px;}
.prose{
  max-width:760px;margin:0 auto;
  color:#3c4059;font-weight:300;font-size:16.5px;line-height:1.8;
}
.prose > .lead{
  margin:0 0 8px;color:var(--navy);font-weight:300;font-size:18.5px;line-height:1.75;
}
/* h2 is a page headline in site.css. Inside the prose it is a section marker,
   so it is reset to something a reader can scan past rather than land on. */
.prose h2{
  margin:56px 0 14px;color:var(--navy);
  font-weight:500;font-size:21px;line-height:1.35;letter-spacing:0;
}
.prose h2::before{
  content:"";display:block;width:28px;height:3px;border-radius:999px;
  background:var(--yellow);margin-bottom:18px;
}
.prose h3{margin:28px 0 8px;color:var(--navy);font-weight:500;font-size:17px;line-height:1.4;}
.prose p{margin:0 0 16px;}
.prose p:last-child{margin-bottom:0;}
.prose strong{font-weight:500;color:var(--navy);}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;}

.prose ul{margin:0 0 18px;padding:0;list-style:none;}
.prose li{position:relative;padding-left:24px;margin-bottom:9px;}
.prose li::before{
  content:"";position:absolute;left:3px;top:.74em;
  width:6px;height:6px;border-radius:999px;background:var(--blue);
}
.prose ol{margin:0 0 18px;padding-left:22px;}
.prose ol li{padding-left:6px;margin-bottom:9px;}
.prose ol li::before{content:none;}

/* The address block at the foot of every one of these pages. */
.contact{margin-top:52px;padding:28px 30px;border-radius:20px;background:var(--surface);}
.contact p{margin:0 0 3px;font-size:15.5px;line-height:1.7;}
.contact p:last-child{margin-bottom:0;}
.contact .who{color:var(--navy);font-weight:500;}

/* Account deletion is the one page here that asks the reader to do something,
   so it gets a step list and a button rather than only prose. */
.steps-card{
  margin:0 0 18px;padding:26px 30px;border-radius:20px;
  border:1px solid #E4E6F2;
}
.steps-card h3{margin-top:0;}
.legal .btn{margin-top:6px;}
.warn{
  margin-top:34px;padding:22px 26px;border-radius:18px;
  background:#FFFCEB;border:1px solid rgba(253,220,75,.65);
  color:var(--navy);font-size:15.5px;line-height:1.7;
}