/* Terms and Privacy. Same brand, plain reading column, no viewer chrome:
   these are documents to be read and cited, not delivered. */

:root{
  --cream:#fdfaf0;
  --white:#ffffff;
  --ink:#221c10;
  --muted:#6e6450;   /* index.css's value. It read #6f6552 here until 09-03,
                        which was drift rather than a decision. */
  --terracotta:#b45f2a;
  --line:rgba(34,28,16,.16);
  --font:'SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --t-state:.18s;
  /* the landing page's values, so a control that appears on both looks and
     moves identically rather than merely similar */
  --t-press:90ms;
  --t-feedback:180ms;
  --t-view:600ms;
  --ease-canvas:cubic-bezier(.4,.1,.2,1);
  --ease-out:cubic-bezier(.2,.7,.3,1);
  --u:1px;                      /* desktop scale unit, set in the query below */
}
@media (min-width:900px){
  :root{--u:min(0.12195vh, 0.077vw, 1.45px)}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font:400 17px/1.7 var(--font);
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--terracotta);color:var(--cream)}

.wrap{max-width:760px;margin:0 auto;padding:0 24px}

/* --------------------------------------------------------------------------
   These pages live to the LEFT of the landing page, so they arrive from the
   left edge and leave the same way. The travel is a transform on the whole
   document, which costs no layout.
   -------------------------------------------------------------------------- */


/* Wordmark centred, back control on the right pointing the way home. */
.topbar{
  padding:26px 0 0;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
}
.topbar-spacer{display:block}
.wordmark{
  grid-column:2;
  justify-self:center;
  font:700 16px/1 var(--font);
  letter-spacing:-.01em;
  color:var(--ink);
  text-decoration:none;
}
.wordmark-ai{color:var(--terracotta)}

/* Same control as "See our Results" on the landing page, mirrored: same
   pill, same scale unit, arrow on the right because home is to the right.
   The numbers below are index.css's, not new ones. */
.pill-back{
  grid-column:3;
  justify-self:end;
  display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 14px;
  border-radius:999px;
  background:var(--white);
  border:1px solid var(--line);
  color:var(--muted);
  font:500 13px/1 var(--font);
  text-decoration:none;
  white-space:nowrap;
  transition:border-color var(--t-feedback) ease,color var(--t-feedback) ease,
             transform var(--t-feedback) var(--ease-out);
}
.pill-back:hover{color:var(--ink);border-color:var(--ink)}
.pill-back:hover span{transform:translate3d(3px,0,0)}   /* leans toward home */
.pill-back span{
  display:inline-block;
  transition:transform var(--t-feedback) var(--ease-out);
}
.pill-back:active{transform:translate3d(0,0,0) scale(.985);transition-duration:var(--t-press)}

@media (min-width:900px){
  .pill-back{
    height:calc(36 * var(--u));
    padding:0 calc(16 * var(--u));
    gap:calc(6 * var(--u));
    font:500 calc(13.5 * var(--u))/1 var(--font);
  }
}

@media (max-width:439px){
  .pill-back{padding:0 11px;font-size:12.5px}
}

.doc-head{margin:44px 0 0;text-align:center}
h1{
  margin:0;
  font:700 clamp(30px,4.6vw,40px)/1.15 var(--font);
  letter-spacing:-.035em;
  text-wrap:balance;
}
.updated{
  margin:12px 0 0;
  font:500 13.5px/1.5 var(--font);
  color:var(--muted);
}

.doc{
  margin:34px 0 0;
  padding:clamp(24px,4vw,44px);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:18px;
}

.doc section{margin:32px 0 0}
.doc section:first-child{margin-top:0}

h2{
  margin:0 0 12px;
  font:700 clamp(19px,2.4vw,22px)/1.25 var(--font);
  letter-spacing:-.025em;
  text-wrap:pretty;
}
h3{
  margin:22px 0 6px;
  font:600 16.5px/1.35 var(--font);
  letter-spacing:-.01em;
}
p{margin:0 0 13px;text-wrap:pretty}
p:last-child{margin-bottom:0}
strong{font-weight:600}

ul{margin:0 0 13px;padding:0;list-style:none}
li{
  position:relative;
  margin:0 0 9px;
  padding-left:20px;
  text-wrap:pretty;
}
li:last-child{margin-bottom:0}
li::before{
  content:"";
  position:absolute;
  left:2px;top:.72em;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--terracotta);
}

a{color:var(--terracotta);text-decoration:underline;text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}

/* A point the reader must not skim past: something Jake has to confirm or
   a promise with teeth. The weight comes from the fill and the bold lead-in
   sentence, not from a coloured bar down one side. */
.callout{
  margin:16px 0;
  padding:16px 18px;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:12px;
  font-size:16px;
  color:var(--muted);
}
.callout strong{
  display:block;
  margin-bottom:4px;
  color:var(--ink);
  font-weight:700;
  letter-spacing:-.01em;
}

.foot{
  margin:34px 0 0;
  padding:22px 0 64px;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 26px;
  font:500 14px/1.4 var(--font);
}
.foot a{color:var(--ink);text-decoration:none}
.foot a:hover{color:var(--terracotta)}

@media print{
  body{background:#fff}
  .topbar,.foot{display:none}
  .doc{border:0;padding:0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms !important}
}