/* ---------------------------------------------------------------
   Impact, shared sheet for the documents
   (terms, privacy, sms-terms, dpa, subprocessors, do-not-sell,
   privacy-request, and later book / booked / 404).

   The generated pages inline _build/css/core.css. These seven are
   static hand-written files, so they run on this sheet instead, and
   until 5 Aug 2026 that meant they were never designed: 3px corners,
   a 2px black rule, a mono type scale, #C99700 mustard where the
   brand orange belongs, and a mast and footer that were a lookalike
   of the real ones rather than the real ones.

   Zach, 5 Aug: "They don't need to be extensively designed, but they
   at least need to be on brand."

   So this sheet is now core.css's palette, type and radii, applied to
   a document. NOT a redesign of the documents. Every value below that
   has a twin in core.css carries the same number, and the ones that
   matter are noted where they appear.

   WHAT IS DELIBERATE AND MUST NOT BE UNDONE
   1. Light theme is locked. This is a page a contractor reads in a
      truck cab in daylight, and the house rule is that our documents
      never follow the viewer's dark mode. The mast and footer are ink
      because the site's mast and footer are ink, which is a brand bar
      on a light document, not a dark theme.
   2. --hiviz is #FF8201 and only ever appears on ink.
      --hiviz-dp is #AC4E00 and is the ONLY orange allowed as TEXT on
      paper, because brand orange measures about 2.2:1 there and fails
      AA outright. core.css calls the same pair --accent and
      --accent-on-light. Never collapse the two.
   3. Radii are generous. Hard edges and 3px corners read cheap and
      have been rejected on this site before.
   4. Archivo and Archivo Black, no third typeface. The mono stack this
      sheet used to carry is gone, including on <code>.
   5. Section labels use core.css's .eyebrow construction: a hairline,
      then letterspaced small caps. Never a pill and never a leading
      dot, both of which have been rejected by name.

   Archivo and Archivo Black both come from the same Google Fonts
   stylesheet core.css uses, loaded with a <link> in each page head
   rather than an @import here, because an @import inside a stylesheet
   blocks rendering on a second serial round trip. Nothing else on
   these pages loads from a third party.
   --------------------------------------------------------------- */

:root{
  /* grounds and inks, straight from core.css */
  --paper:#F5F2EC;          /* core --paper */
  --paper-2:#EDE9E1;        /* core --paper2 */
  --plate:#FFFFFF;          /* the warm-white surface light bands use */
  --ink:#14161A;            /* core --onpaper, the reading colour */
  --ink-deep:#0B0B0C;       /* core --ink, the site's ground */
  --ink-foot:#08080A;       /* core footer ground */
  --onink:#F5F2EC;
  /* The dim inks are the OPAQUE composites of core.css's alpha tokens against the ground
     they sit on, not the alpha tokens themselves. Same rendered colour, and the reason to
     flatten them here is that both contrast checkers read an rgba() string and drop the
     alpha, so an alpha colour passes vacuously and an alpha BACKGROUND reports a false
     1.00:1. Measured ratios are in the comments and they are real. */
  --steel:#616162;    /* = core --onpaper-dim   over paper,      5.5:1 */
  --steel-2:#908F8D;  /* = core --onpaper-dimmer over paper, non-text only */
  --mist:#B3B0AD;     /* footer body,      9.5:1 on --ink-foot */
  --mist-2:#A4A29F;   /* footer fine print, 7.9:1 on --ink-foot */
  --tint-th:#EDEAE4;  /* table head fill, 5.1:1 under --steel */
  --tint-flag:#F6EADC;/* flag fill,       4.6:1 under --hiviz-dp */

  /* rules. Same weight and the same colour relationship core.css uses:
     one hairline, .13 alpha of the ink on paper, .14 alpha of the paper on ink. */
  --rule:rgba(20,22,26,.13);       /* core --line-l */
  --rule-dk:rgba(245,242,236,.14); /* core --line-d */

  /* accent. See note 2 at the top of this file. */
  --hiviz:#FF8201;                 /* core --accent,          ink grounds only */
  --hiviz-dp:#AC4E00;              /* core --accent-on-light, paper grounds only */

  --display:'Archivo Black','Archivo',"Helvetica Neue",Arial,sans-serif;
  --body:Archivo,"Helvetica Neue",Arial,sans-serif;

  --gut:clamp(1.15rem,4vw,2.4rem); /* core .wrap padding-inline */
  --max:1180px;                    /* core .wrap max-width */
  --doc:44rem;

  /* generous radii, core.css's own scale */
  --r:20px; --r-sm:14px; --r-xs:8px;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* hard light lock, never follow the viewer's dark mode.
   background-color rather than background, so the tinted field below survives. */
html,body{background-color:var(--paper)!important;color:var(--ink)!important}

/* Flat fill on paper is the AI tell core.css warns about, so the document ground
   carries the same warm blurred field the light bands do, sized to sit under the
   opening of the page and fade out. No extra element and no stacking context. */
body{background-image:
    radial-gradient(58rem 32rem at 88% 6rem,rgba(255,130,1,.10) 0%,transparent 62%),
    radial-gradient(46rem 28rem at -6% 20rem,rgba(172,78,0,.055) 0%,transparent 58%);
  background-repeat:no-repeat}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--body);font-size:1.0625rem;line-height:1.62;
  font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0}
/* Focus ring: core.css uses --accent, which is right on ink and measures about 2.2:1
   against paper. These pages are paper, so the ring takes the on-light orange and
   clears the 3:1 non-text minimum. Same 3px, same 6px radius as core. */
:focus-visible{outline:3px solid var(--hiviz-dp);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

/* ---- section label: core.css .eyebrow, to the character ----
   .86rem / 600 / .16em / uppercase, a 2.4rem hairline in front of it at .55 alpha of
   the current colour, no container of any kind. The hairline is attached to p.lab only:
   one span.lab sits mid-sentence on /sms-terms and a rule in front of that would be a
   dash in the middle of a paragraph. */
.lab{font-family:var(--body);font-size:.86rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--hiviz-dp);line-height:1.4;margin:0}
p.lab{display:inline-flex;align-items:center;gap:.9rem}
p.lab::before{content:"";width:2.4rem;height:1px;background:currentColor;opacity:.55;flex:none}

/* ---- masthead ----
   The site's mast, not a lookalike of it: the real drawn wordmark on the real ink
   ground with the real hairline under it. It used to be the word "Impact" set in
   Archivo with an orange square beside it, which no font reproduces and which read as
   a different company's header. */
.mast{background:var(--ink-deep);border-bottom:1px solid var(--rule-dk)}
.mast-in{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding-block:1.05rem}
.mark{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none}
.mark img{height:2rem;width:auto;display:block}
@media(min-width:640px){.mark img{height:2.5rem}}
/* the label opposite the mark sits on ink, so it takes brand orange, the same way
   core.css gives .eyebrow --accent on a dark band and --accent-on-light on a light one */
.mast .lab{color:var(--hiviz)}

/* ---- buttons: core.css .btn, same shape and same weight ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--body);font-weight:700;font-size:1rem;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;padding:1.05rem 2rem;border:0;
  background:var(--hiviz);color:var(--ink-deep);border-radius:var(--r-sm);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(255,130,1,.6)}
.btn:active{transform:translateY(0)}
/* the quieter variant, core's .navcta: a hairline outline that fills with accent */
.btn--ghost{background:none;color:var(--ink);
  box-shadow:inset 0 0 0 1.5px rgba(20,22,26,.28)}
.btn--ghost:hover{background:var(--hiviz);color:var(--ink-deep);box-shadow:none}

/* ---- document body ---- */
.doc{position:relative;padding-block:clamp(2.75rem,6vw,4.5rem) clamp(3.5rem,8vw,6rem);
  /* the raking top light every light band in core.css carries */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.doc-in{max-width:var(--doc)}
/* h1 is core's .display: Archivo Black at weight 400, tight leading, -.03em */
.doc h1{font-family:var(--display);font-weight:400;
  font-size:clamp(1.9rem,5vw,2.85rem);line-height:1.02;letter-spacing:-.03em;
  margin:.35rem 0 0;text-wrap:balance}
/* the effective-date block. Was a 2px solid black rule, which is not a weight this
   site uses anywhere; core.css draws one hairline and so does this. */
.doc .stamp{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--rule);
  font-size:.86rem;letter-spacing:.02em;color:var(--steel);line-height:1.8}
/* Section headings are Archivo Black, and each one opens with a hairline, which is what
   gives a 250-line document the same rhythm the site's bands have. */
.doc h2{font-family:var(--display);font-weight:400;
  font-size:clamp(1.2rem,2.6vw,1.5rem);line-height:1.15;letter-spacing:-.028em;
  margin:2.9rem 0 0;padding-top:1.5rem;border-top:1px solid var(--rule);
  text-wrap:balance}
.doc h3{font-family:var(--body);font-weight:700;font-size:1.0625rem;line-height:1.35;
  letter-spacing:-.012em;margin:1.75rem 0 0}
.doc p{margin-top:.9rem}
.doc ul,.doc ol{margin:.9rem 0 0;padding-left:1.35rem}
.doc li{margin-top:.45rem}
.doc li>ul{margin-top:.45rem}
.doc li::marker{color:var(--steel-2)}
.doc strong{font-weight:700}
/* prose links get the treatment the rest of the site gives them: the on-light orange
   plus a hairline underline. core.css sets a{color:inherit}, so an unstyled link inside
   a paragraph is invisible to a reader. */
.doc a{color:var(--hiviz-dp);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:rgba(172,78,0,.4)}
.doc a:hover{text-decoration-color:var(--hiviz-dp)}
/* no third typeface, so an inline token is a tinted chip in Archivo rather than a
   monospace face. There is exactly one on the whole set. */
.doc code{font-family:var(--body);font-size:.92em;font-weight:600;letter-spacing:.01em;
  background:var(--paper-2);padding:.12em .42em;border-radius:var(--r-xs);
  box-shadow:inset 0 0 0 1px var(--rule)}

/* the on-this-page block, built like every other light surface in core.css:
   a warm-white plate, a raking top light, and a hairline plate edge. Not a flat fill. */
.toc{margin-top:1.75rem;padding:1.2rem 1.4rem;border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.5));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(20,22,26,.06),
    0 24px 54px -44px rgba(20,22,26,.55)}
.toc p{margin:0 0 .65rem;font-size:.78rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--steel)}
.toc ol{margin:0;padding-left:1.2rem;font-size:.9375rem}
.toc li{margin-top:.3rem}
.toc a{text-decoration-color:rgba(172,78,0,.3)}

/* a flagged block: something counsel must look at, or the reader must not miss.
   Orange rail, never a coloured background wash. The rail is an inset shadow rather
   than a border so the block can hold a real radius without the rule bending round it. */
.flag{margin-top:1.4rem;padding:1rem 1.2rem 1rem 1.35rem;border-radius:var(--r-sm);
  background:var(--tint-flag);
  box-shadow:inset 3px 0 0 var(--hiviz-dp),inset 0 0 0 1px rgba(172,78,0,.18);
  font-size:.9375rem;line-height:1.6}
.flag b{font-weight:700}

/* A wide table must scroll inside its own box; the page must never scroll sideways.
   Measured overflow at 320 and 390 on subprocessors before this. min-width keeps the
   columns legible rather than crushing four of them into a phone. */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:1.2rem;
  border-radius:var(--r-sm);box-shadow:0 0 0 1px rgba(20,22,26,.08)}
.tblwrap .tbl{margin-top:0;min-width:34rem}

/* The table scrolls, but nothing SAID so. Measured on a 390px phone: every legal table
   is 544px inside a 353px box, so 191px is hidden, and the price table on /terms cut
   "$891 per quarter, p" mid-word at the right edge with no scrollbar, no fade and no
   hint. A reader has no reason to think there is more to the right.

   This is the background-attachment:local shadow pattern: the two paper-coloured
   gradients scroll WITH the content and cover the shadows when there is nothing more
   that way, while the two shadows are fixed to the box. The result is an edge shadow
   that appears only on the side that has more table, and it needs no JavaScript and no
   markup change. Kept off when the user asked for less motion is unnecessary; it is
   static paint, not animation. */
.tblwrap{
  background-image:
    linear-gradient(to right, var(--paper) 40%, rgba(245,242,236,0)),
    linear-gradient(to left,  var(--paper) 40%, rgba(245,242,236,0)),
    linear-gradient(to right, rgba(20,22,26,.16), rgba(20,22,26,0) 88%),
    linear-gradient(to left,  rgba(20,22,26,.16), rgba(20,22,26,0) 88%);
  background-position:left center, right center, left center, right center;
  background-repeat:no-repeat;
  background-size:44px 100%, 44px 100%, 16px 100%, 16px 100%;
  background-attachment:local, local, scroll, scroll}
.tbl{width:100%;border-collapse:collapse;margin-top:1.2rem;font-size:.9375rem}
.tbl th,.tbl td{text-align:left;padding:.75rem .9rem;border-bottom:1px solid var(--rule);
  vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
/* the column heads are the same letterspaced small caps as .lab, minus the rule */
.tbl th{font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--steel);background:var(--tint-th)}

/* ---- forms. No page in this set carries one today; the sheet is shared with
        book / booked, which will. ---- */
.ask-lab{font-size:.78rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--steel);display:block;margin-bottom:.6rem}
.f-row{margin-top:1.35rem}
.f-row input{width:100%;font-family:var(--body);font-size:1.0625rem;
  padding:1rem 1.15rem;border:1.5px solid rgba(20,22,26,.2);border-radius:var(--r-sm);
  background:var(--plate);color:var(--ink)}
.f-row input::placeholder{color:var(--steel-2)}
.f-row input:focus{outline:none;border-color:var(--hiviz-dp);
  box-shadow:0 0 0 3px rgba(255,130,1,.22)}
.consent{display:flex;gap:.7rem;align-items:flex-start;margin-top:1.5rem;
  font-size:.875rem;line-height:1.55;color:var(--ink)}
.consent input{flex:0 0 auto;width:1.15rem;height:1.15rem;margin-top:.15rem;
  accent-color:var(--hiviz-dp)}
.f-help{margin-top:.65rem;font-size:.8125rem;color:var(--steel);line-height:1.55}

/* ---- the Global Privacy Control readout on /do-not-sell ----
   These four rules lived in an inline <style> in that page, where they were invisible to
   this sheet and shipped the off-brand palette twice: a 1px black-ish border, no radius,
   and a plain ink button. Moved here so the palette has one home, which is the reason a
   shared sheet exists. The page carries no <style> block now. */
.gpc{margin-top:1.4rem;padding:1.1rem 1.25rem;border-radius:var(--r-sm);
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.45));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(20,22,26,.07)}
.gpc .dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;
  margin-right:.6rem;background:var(--steel-2);vertical-align:baseline}
.gpc.on .dot{background:#1C6B3D}
.gpc b{font-weight:700}
.btn-optout{display:inline-flex;align-items:center;min-height:44px;margin-top:.9rem;
  padding:.75rem 1.35rem;font-family:var(--body);font-size:.98rem;font-weight:700;
  letter-spacing:-.01em;cursor:pointer;border:0;border-radius:var(--r-sm);
  background:var(--hiviz);color:var(--ink-deep);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn-optout:hover{transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(255,130,1,.6)}
.btn-optout[disabled]{opacity:.45;cursor:default;transform:none;box-shadow:none}

/* ---- footer: core.css's footer, same ground, same hairline, same orange hover ---- */
.foot{background:var(--ink-foot);color:var(--mist);font-size:.9375rem;
  border-top:1px solid var(--rule-dk)}
.foot-in{display:grid;gap:1.15rem;padding-block:3rem 1.75rem;max-width:60rem}
.foot .mark{display:block;margin-bottom:.5rem}
.foot .mark img{height:2.2rem}
.foot a{color:var(--onink);text-decoration:none;border-bottom:1px solid var(--rule-dk);
  transition:color .2s var(--ease),border-color .2s var(--ease)}
.foot a:hover{color:var(--hiviz);border-bottom-color:var(--hiviz)}
.foot-nav{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;font-size:.9rem}
/* the footer and masthead links measured 24px tall on a phone. The homepage is
   held to a 44px minimum and these documents were not, so the padding here buys
   the hit area back without moving the text. */
.foot-nav a{display:inline-flex;align-items:center;min-height:44px}
.mast-in .mark,.mast-in .lab{display:inline-flex;align-items:center;min-height:44px}
.colophon{border-top:1px solid var(--rule-dk);padding-block:1.5rem 2.25rem;
  font-size:.8125rem;line-height:1.75;letter-spacing:.01em;color:var(--mist-2)}
.colophon p+p{margin-top:.7rem}

/* Accessibility: honour a reduced-motion preference. The generated pages already do
   this inline; the shared sheet was missing it, which is exactly the kind of gap that
   only a scripted audit catches. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

@media print{
  body{background-image:none}
  .mast,.foot{background:#fff;color:#111;border-color:#ccc}
  /* the wordmark is drawn for ink grounds, so on paper it prints as a solid black mark */
  .mast .mark img,.foot .mark img{filter:brightness(0)}
  .foot a,.colophon{color:#111}
  .doc{padding-block:0;box-shadow:none}
  .toc,.btn,.btn-optout{display:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#555}
}