/* Prospect page wrapper.
   The document body comes out of SuperDocs carrying its own inline styles.
   Everything here either sits outside that body, or constrains it so a Word
   document behaves on a phone. */

:root{
  color-scheme: light;
  --paper:#FFFFFF;
  --ground:#EEEDE9;
  --ink:#16181C;
  --ink-2:#4C5158;
  --ink-3:#858A91;
  --rule:#E1E0DB;
  --accent:#134E43;
  --accent-2:#1C6C5E;
  --accent-soft:#E4EFEB;
  --shadow:0 1px 2px rgba(20,22,26,.05), 0 22px 48px -32px rgba(20,22,26,.4);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#16191B;
    --ground:#0E1012;
    --ink:#ECEEEC;
    --ink-2:#B2B7B6;
    --ink-3:#868C8A;
    --rule:#282C2E;
    --accent:#5FBFA9;
    --accent-2:#7FD3BF;
    --accent-soft:#122A25;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 22px 48px -32px rgba(0,0,0,.9);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* masthead */
.masthead{border-bottom:1px solid var(--rule);background:var(--paper)}
.masthead-in{
  max-width:820px;margin:0 auto;padding:12px 28px;
  display:flex;justify-content:space-between;gap:16px;align-items:center;
}
.stamp{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
.stamp.muted{color:var(--ink-3)}

/* the sheet */
.sheet{
  max-width:820px;margin:34px auto 90px;background:var(--paper);
  border:1px solid var(--rule);border-radius:4px;box-shadow:var(--shadow);
  padding:0 0 8px;
}
.sheet-head{padding:48px 56px 30px;border-bottom:1px solid var(--rule)}
.sheet-head h1{
  font-family:var(--serif);font-size:clamp(29px,4.6vw,40px);line-height:1.14;
  font-weight:600;margin:0 0 12px;letter-spacing:-.01em;text-wrap:balance;
}
.subtitle{font-size:19px;color:var(--ink-2);margin:0 0 26px;max-width:56ch}
.basis{
  display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;
  background:var(--accent-soft);border-left:3px solid var(--accent);
  padding:13px 18px;border-radius:0 6px 6px 0;
}
.basis-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;
}
.basis-body{font-size:15px;color:var(--ink-2);flex:1;min-width:220px}

/* the document itself */
.doc{padding:40px 56px 44px;font-size:17px}
.doc > *:first-child{margin-top:0}
.doc h1,.doc h2,.doc h3,.doc h4{font-family:var(--serif);font-weight:600;line-height:1.25;margin:34px 0 12px;text-wrap:balance}
.doc h1{font-size:28px}
.doc h2{font-size:23px;padding-bottom:7px;border-bottom:1px solid var(--rule)}
.doc h3{font-size:19px}
.doc p{margin:0 0 16px;max-width:68ch}
.doc ul,.doc ol{margin:0 0 18px;padding-left:24px;max-width:68ch}
.doc li{margin-bottom:7px}
.doc strong,.doc b{font-weight:640}
.doc blockquote{
  margin:22px 0;padding:4px 0 4px 20px;border-left:3px solid var(--rule);
  color:var(--ink-2);font-style:normal;
}
.doc a{color:var(--accent);text-underline-offset:2px}
.doc img{max-width:100%;height:auto;border-radius:3px}
.doc hr{border:0;border-top:1px solid var(--rule);margin:30px 0}

/* Word tables arrive with fixed widths and inline borders. Contain them. */
.doc table{
  border-collapse:collapse;width:100%!important;max-width:100%;
  font-size:15px;margin:22px 0;display:table;
}
.doc thead th{
  text-align:left;font-family:var(--sans);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;
}
.doc th,.doc td{border:1px solid var(--rule)!important;padding:10px 12px;vertical-align:top}
.doc table + p{margin-top:0}

/* any element the export sizes in pixels gets reined in on small screens */
.doc [style*="width"]{max-width:100%!important}

/* cta */
.cta{
  margin:8px 56px 44px;padding:30px 32px;background:var(--accent);
  border-radius:8px;color:#fff;
}
.cta h2{font-family:var(--serif);font-size:23px;font-weight:600;margin:0 0 10px;line-height:1.25;color:#fff}
.cta p{margin:0 0 20px;color:rgba(255,255,255,.86);font-size:16px;max-width:58ch}
.cta-btn{
  display:inline-block;background:#fff;color:var(--accent);text-decoration:none;
  font-weight:640;font-size:16px;padding:13px 26px;border-radius:6px;
}
.cta-btn:hover{background:#F0F5F3}
.cta-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.cta-foot{margin:14px 0 0!important;font-size:14px!important;color:rgba(255,255,255,.7)!important}
@media (prefers-color-scheme: dark){
  .cta{background:var(--accent-soft);border:1px solid var(--accent)}
  .cta h2{color:var(--ink)}
  .cta p{color:var(--ink-2)}
  .cta-btn{background:var(--accent);color:#0E1012}
  .cta-foot{color:var(--ink-3)!important}
}

/* foot */
.foot{padding:0 56px 34px}
.foot p{font-size:13.5px;color:var(--ink-3);margin:0;border-top:1px solid var(--rule);padding-top:18px;max-width:none}

@media (max-width:640px){
  body{font-size:16px}
  .sheet{margin:16px 12px 60px;border-radius:3px}
  .sheet-head{padding:32px 22px 24px}
  .doc{padding:28px 22px 30px;font-size:16px}
  .cta{margin:8px 22px 30px;padding:24px 22px}
  .foot{padding:0 22px 26px}
  .masthead-in{padding:11px 16px}
  .doc table{font-size:13.5px}
  .doc th,.doc td{padding:8px 9px}
}

@media print{
  body{background:#fff}
  .masthead,.cta{display:none}
  .sheet{box-shadow:none;border:0;margin:0;max-width:none}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
