@font-face{font-family:Geist;src:url(/fonts/geist-sans-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Geist;src:url(/fonts/geist-sans-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
#tdc-v7-system{--tdc-font:Geist,Arial,sans-serif;--tdc-body:14px;--tdc-heading:24px;--tdc-display:32px;--tdc-pad:24px;--tdc-gap:20px;--tdc-buffer:30px;--tdc-line:#e2e2e2;--tdc-window:100svh;font:400 var(--tdc-body)/1.5 var(--tdc-font);color:#111;text-align:left;container-type:inline-size}
#tdc-v7-system *{box-sizing:border-box}
#tdc-v7-system :is(h1,h2,h3,p,ul){margin:0;font:inherit}
#tdc-v7-system a{color:inherit;text-decoration:none}
#tdc-v7-system [hidden]{display:none!important}
#tdc-v7-system .tdc-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);grid-template-rows:minmax(0,1fr);height:var(--tdc-window);width:100%;margin:0 auto;border:1px solid var(--tdc-line);background:#fff;overflow:hidden;container-type:inline-size}
#tdc-v7-system .tdc-rail{display:flex;flex-direction:column;justify-content:flex-end;min-width:0;min-height:0;border-right:1px solid var(--tdc-line);background:#fff}
#tdc-v7-system .tdc-logo{display:block;padding:var(--tdc-pad)}
#tdc-v7-system .tdc-logo svg{display:block;width:100%;height:auto;max-width:230px}
#tdc-v7-system .tdc-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
#tdc-v7-system .tdc-nav a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:12px 4px;border-top:1px solid var(--tdc-line);border-right:1px solid var(--tdc-line)}
#tdc-v7-system .tdc-nav a:nth-child(3){border-right:0}
#tdc-v7-system .tdc-nav .tdc-client{border-right:0}
#tdc-v7-system .tdc-nav .tdc-talk{grid-column:2/-1;justify-content:space-between;background:#111;color:#fff;border-color:#111;padding:12px 16px}
/* Legal. Sits at the tail of the scrolling content, where a footer would be, and
   OUTSIDE .tdc-page so it never fights the bottom-alignment rule. It was in the
   lower-left rail first and competed with the nav for the same corner. A card
   form needs terms and a refund policy one click away, so this has to be on every
   page rather than only on /why/. */
#tdc-v7-system .tdc-legal{display:flex;flex-wrap:wrap;gap:var(--tdc-gap);padding:14px var(--tdc-pad);border-top:1px solid var(--tdc-line);color:#6b6b6b;font-size:12px}
#tdc-v7-system .tdc-legal a{color:#6b6b6b}
#tdc-v7-system .tdc-legal a:hover{color:#111;text-decoration:underline}
#tdc-v7-system .tdc-legal span{margin-right:auto}
#tdc-v7-system .tdc-nav a:not(.tdc-talk):hover,#tdc-v7-system .tdc-persona:hover{background:#f5f5f5}
#tdc-v7-system .tdc-nav .tdc-talk:hover{background:#333;border-color:#333}
#tdc-v7-system .tdc-main{overflow:auto;min-width:0;min-height:0;overscroll-behavior:contain}
#tdc-v7-system .tdc-page{min-height:100%;display:flex;flex-direction:column;justify-content:flex-end}
#tdc-v7-system .tdc-page :where(p,li){font:400 var(--tdc-body)/1.5 var(--tdc-font);letter-spacing:0;color:#444}
#tdc-v7-system .tdc-page :where(h2,h3){font:600 var(--tdc-heading)/1.15 var(--tdc-font);letter-spacing:-.035em;color:#111}
#tdc-v7-system .tdc-display{display:block;width:100%;max-width:none;font:600 var(--tdc-display)/1.15 var(--tdc-font);letter-spacing:-.035em;text-wrap:pretty;color:#111}
#tdc-v7-system .tdc-display strong{font-weight:inherit}
#tdc-v7-system .tdc-eyebrow{display:block;font-size:var(--tdc-body);font-weight:400;line-height:1.5;letter-spacing:0;color:#555;margin-bottom:16px}
#tdc-v7-system .tdc-hero,#tdc-v7-system .tdc-ribbon{padding:var(--tdc-pad);border-bottom:1px solid var(--tdc-line)}
#tdc-v7-system .tdc-hero>p:not(.tdc-display){margin-top:var(--tdc-gap)}
#tdc-v7-system .tdc-grid,#tdc-v7-system .tdc-deliverable,#tdc-v7-system .tdc-deliverable-labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
#tdc-v7-system .tdc-cell{min-width:0;padding:var(--tdc-pad);padding-bottom:calc(var(--tdc-pad) + var(--tdc-buffer));border-right:1px solid var(--tdc-line);text-align:left}
#tdc-v7-system .tdc-cell:last-child{border-right:0}
#tdc-v7-system .tdc-cell :is(h2,h3){margin-bottom:var(--tdc-gap)}
#tdc-v7-system .tdc-cell p+p{margin-top:var(--tdc-gap)}
#tdc-v7-system .tdc-issues,#tdc-v7-system .tdc-services,#tdc-v7-system .tdc-deliverable,#tdc-v7-system .tdc-deliverable-labels{border-bottom:1px solid var(--tdc-line)}
#tdc-v7-system .tdc-wide{grid-column:span 2}
#tdc-v7-system .tdc-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
#tdc-v7-system .tdc-examples{border-bottom:1px solid var(--tdc-line)}
#tdc-v7-system .tdc-examples .tdc-cell:last-child{border-right:0}
#tdc-v7-system .tdc-examples .tdc-cta{margin-top:var(--tdc-gap)}
#tdc-v7-system .tdc-next .tdc-cta:hover{background:#ededed}
#tdc-v7-system .tdc-next .tdc-buy{background:#111;color:#fff}
#tdc-v7-system .tdc-next .tdc-buy:hover{background:#333}
#tdc-v7-system .tdc-pair .tdc-cell:nth-child(2n){border-right:0}
#tdc-v7-system .tdc-pair .tdc-cell:not(:nth-last-child(-n+2)){border-bottom:1px solid var(--tdc-line)}
#tdc-v7-system .tdc-bottom .tdc-wide a.tdc-cta{text-decoration:underline;text-underline-offset:3px}
#tdc-v7-system .tdc-next{display:block}
#tdc-v7-system .tdc-cta{font-weight:600;color:#111}
/* STANDALONE CTA. Any CTA that sits on its own line gets the same padded hover
   target with a 12px bleed on both sides. Inline CTAs inside prose are excluded
   below and keep the underline instead. */
#tdc-v7-system :is(.tdc-next,.tdc-contents,.tdc-portrait-links,.tdc-examples,.tdc-other-services) .tdc-cta{display:flex;align-items:center;justify-content:space-between;gap:var(--tdc-gap);padding:10px 12px;margin-left:-12px;margin-right:-12px;min-height:44px}
#tdc-v7-system :is(.tdc-next,.tdc-contents,.tdc-portrait-links,.tdc-examples,.tdc-other-services) .tdc-cta:not(.tdc-buy):hover{background:#ededed}
/* Every solid dark control, one rule: darken, keep the text white. */
#tdc-v7-system .tdc-buy{background:#111}
#tdc-v7-system .tdc-buy,#tdc-v7-system .tdc-buy *{color:#fff}
#tdc-v7-system .tdc-buy:hover{background:#333}
#tdc-v7-system .tdc-buy:hover,#tdc-v7-system .tdc-buy:hover *{color:#fff}
#tdc-v7-system .tdc-next .tdc-cta{margin-top:var(--tdc-gap)}
#tdc-v7-system .tdc-other-services{margin-top:calc(var(--tdc-pad) + var(--tdc-buffer))}
#tdc-v7-system .tdc-deliverable-labels>p{padding:16px var(--tdc-pad);font-weight:600;border-right:1px solid var(--tdc-line)}
#tdc-v7-system .tdc-deliverable-labels>p:last-child{border-right:0}
#tdc-v7-system .tdc-reading-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
#tdc-v7-system .tdc-article section+section{margin-top:var(--tdc-pad);padding-top:var(--tdc-pad);border-top:1px solid var(--tdc-line)}
#tdc-v7-system .tdc-article section{scroll-margin-top:var(--tdc-pad)}
#tdc-v7-system .tdc-article section:not(:last-child){padding-bottom:var(--tdc-buffer)}
#tdc-v7-system .tdc-contents a{display:block;padding:10px 0}
#tdc-v7-system .tdc-contents a:not(.tdc-cta){color:#444}
#tdc-v7-system .tdc-contents p{margin-top:var(--tdc-pad)}
#tdc-v7-system .tdc-contents a.tdc-cta{margin-top:0}
#tdc-v7-system .tdc-cell-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:var(--tdc-gap)}
#tdc-v7-system .tdc-cell-head h2{margin:0}
/* ONE ARROW PER DESTINATION. A linked cell shows the corner arrow, and a cell that
   ends in its own CTA shows that arrow instead. A block carrying both was pointing
   at one destination twice: the examples ribbons did this on 21 blocks. Written as
   :has() so any future block with both is corrected automatically rather than
   needing somebody to notice. Cells with several DIFFERENT links keep an arrow each,
   because those are separate destinations. */
#tdc-v7-system .tdc-persona:has(.tdc-cta) .tdc-cell-head [aria-hidden]{display:none}
#tdc-v7-system .tdc-persona{display:block}
@container(max-width:899px){
 /* An eyebrow ("For People") supplies the optical space above the display line.
    Pages without one, the homepage included, need it added back on mobile only. */
 #tdc-v7-system .tdc-hero:not(:has(.tdc-eyebrow)),#tdc-v7-system .tdc-ribbon:first-child{padding-top:calc(var(--tdc-pad) + 20px)}
 #tdc-v7-system .tdc-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
 #tdc-v7-system .tdc-rail{border-right:0;border-bottom:1px solid var(--tdc-line);justify-content:flex-start}
 #tdc-v7-system .tdc-logo{padding:12px var(--tdc-pad)}
 #tdc-v7-system .tdc-logo svg{width:184px;max-width:100%}
 #tdc-v7-system .tdc-nav{grid-template-columns:repeat(6,minmax(0,1fr))}
 #tdc-v7-system .tdc-nav a{min-height:44px;padding:8px 2px}
 #tdc-v7-system .tdc-nav a:nth-child(3){border-right:1px solid var(--tdc-line)}
 #tdc-v7-system .tdc-nav .tdc-talk{grid-column:5/-1;padding:8px 12px}
 #tdc-v7-system .tdc-grid,#tdc-v7-system .tdc-deliverable,#tdc-v7-system .tdc-reading-grid{grid-template-columns:1fr}
 #tdc-v7-system .tdc-wide{grid-column:auto}
 #tdc-v7-system .tdc-cell{border-right:0;border-bottom:1px solid var(--tdc-line)}
 #tdc-v7-system .tdc-cell:last-child{border-bottom:0}
 #tdc-v7-system .tdc-deliverable-labels{display:none}
 #tdc-v7-system .tdc-deliverable .tdc-cell{border-bottom:0;padding-bottom:0}
 #tdc-v7-system .tdc-deliverable .tdc-cell:last-child{padding-bottom:calc(var(--tdc-pad) + var(--tdc-buffer))}
 #tdc-v7-system .tdc-deliverable [data-label]::before{content:attr(data-label);display:block;font-weight:600;margin-bottom:12px}
 #tdc-v7-system .tdc-article{border-right:0;border-top:1px solid var(--tdc-line)}
 #tdc-v7-system .tdc-contents{grid-row:1}
}

html,body{margin:0;height:100%;background:#fff}body{overflow:hidden}
#tdc-v7-system a:focus-visible,#tdc-v7-system button:focus-visible{outline:2px solid #111;outline-offset:-4px}
#tdc-v7-system .tdc-logo img{display:block;width:100%;height:auto;max-width:230px}
#tdc-v7-system .tdc-catalog .tdc-cell{min-height:230px;border-bottom:1px solid var(--tdc-line)}
#tdc-v7-system .tdc-catalog .tdc-cell:nth-child(3n){border-right:0}
#tdc-v7-system .tdc-bottom{margin-top:0}
#tdc-v7-system .tdc-page>*{flex-shrink:0}
@container(max-width:899px){
 #tdc-v7-system .tdc-logo img{width:184px;max-width:100%}
 #tdc-v7-system .tdc-catalog .tdc-cell{aspect-ratio:auto;min-height:0}
 /* INVERTED SURFACE. The mobile page-bottom CTA is a dark cell, so EVERY
    descendant inverts, not a hand-listed set of elements. Listing h2/p/a is how
    this broke: the CTA became a <span> and kept #111 on a #111 ground. Any new
    element inside a dark cell is legible by default under this rule. */
 #tdc-v7-system .tdc-bottom .tdc-next{background:#111;color:#fff;border-color:#111}
 #tdc-v7-system .tdc-bottom .tdc-next *{color:#fff;border-color:#333}
 #tdc-v7-system .tdc-bottom .tdc-next .tdc-cta:hover{background:#333}
 /* A solid button cannot stay solid-dark on a dark ground: it flips to solid light. */
 #tdc-v7-system .tdc-bottom .tdc-next .tdc-buy{background:#fff;border-color:#fff}
 #tdc-v7-system .tdc-bottom .tdc-next .tdc-buy,#tdc-v7-system .tdc-bottom .tdc-next .tdc-buy *{color:#111}
 #tdc-v7-system .tdc-bottom .tdc-next .tdc-buy:hover{background:#e2e2e2;border-color:#e2e2e2}
 #tdc-v7-system .tdc-bottom .tdc-next a:focus-visible,#tdc-v7-system .tdc-bottom .tdc-next :focus-visible{outline-color:#fff}
}

#tdc-v7-system :is(input,textarea,select,button){font:inherit;border-radius:0}
#tdc-v7-system .tdc-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--tdc-gap)}
#tdc-v7-system .tdc-field-wide{grid-column:1/-1}
#tdc-v7-system form :is(input:not([type=hidden]),textarea,select){display:block;width:100%;margin-top:8px;border:1px solid var(--tdc-line);background:#fff;color:#111;padding:12px;min-height:44px}
#tdc-v7-system form :is(input,textarea,select):focus{outline:2px solid #111;outline-offset:2px}
#tdc-v7-system form label span{color:#555}
#tdc-v7-system form textarea{resize:vertical}
/* The native select renders at its own height with its own chrome. Strip it and
   rebuild it on the same box as every other field, with our own caret. */
#tdc-v7-system form select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;
 background-image:linear-gradient(45deg,transparent 50%,#111 50%),linear-gradient(135deg,#111 50%,transparent 50%);
 background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
 background-size:6px 6px,6px 6px;background-repeat:no-repeat}
#tdc-v7-system form select:hover{background-color:#f5f5f5}
#tdc-v7-system form>p,#tdc-v7-system form>.cf-turnstile{margin-top:var(--tdc-gap)}
/* SOLID DARK CONTROLS. Any control painted #111 carries white text, and the rule
   has to out-specify .tdc-cta (which sets color:#111 and was winning here, giving
   a black label on a black button). Add new dark controls to this list. */
#tdc-v7-system form button{display:flex;width:100%;justify-content:space-between;margin-top:var(--tdc-gap);padding:16px 24px;border:0;background:#111;cursor:pointer}
#tdc-v7-system form button,#tdc-v7-system form button.tdc-cta,#tdc-v7-system form button *,
#tdc-v7-system .tdc-order-form button,#tdc-v7-system .tdc-order-form button *{color:#fff}
#tdc-v7-system form button:hover{background:#333}
#tdc-v7-system form button:disabled{opacity:.55;cursor:wait}
#tdc-v7-system .tdc-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
#tdc-v7-system .tdc-article>h2,#tdc-v7-system .tdc-article>h3{margin-top:var(--tdc-pad)}
#tdc-v7-system .tdc-article a,#tdc-v7-system form p a{text-decoration:underline;text-underline-offset:3px}
@container(max-width:599px){#tdc-v7-system .tdc-form-grid{grid-template-columns:1fr}}


#tdc-v7-system .tdc-chart{margin:0}
#tdc-v7-system .tdc-chart figcaption{font-weight:600;margin-bottom:var(--tdc-gap);color:#111}
/* ONE grid for the whole plot, with the rows as display:contents, so the label
   and value columns are sized once and shared. Per-row grids made each track a
   different width (495px vs 485px), which quietly put the bars on two different
   scales: the longer value string stole width from its own bar. */
#tdc-v7-system .tdc-chart-plot{display:grid;grid-template-columns:minmax(90px,max-content) minmax(0,1fr) minmax(56px,max-content);align-items:center;gap:12px}
#tdc-v7-system .tdc-bar-row{display:contents}
#tdc-v7-system .tdc-bar-label{color:#555}
#tdc-v7-system .tdc-bar-track{display:block;height:20px;background:#f5f5f5;border:1px solid var(--tdc-line)}
#tdc-v7-system .tdc-bar{display:block;height:100%;background:#c7c7c7}
#tdc-v7-system .tdc-bar[data-emphasis="true"]{background:#111}
#tdc-v7-system .tdc-bar-value{font-weight:600;color:#111;text-align:right}
#tdc-v7-system .tdc-chart-note{margin-top:var(--tdc-gap);color:#555}
@container(max-width:899px){#tdc-v7-system .tdc-bar-row{grid-template-columns:minmax(72px,auto) minmax(0,1fr) minmax(48px,auto)}}

#tdc-v7-system .tdc-cell ul{margin:0;padding-left:18px}
#tdc-v7-system .tdc-cell li{color:#444;margin-bottom:10px}
#tdc-v7-system .tdc-order-form{display:grid;gap:16px}
#tdc-v7-system .tdc-order-form label{display:grid;gap:8px;color:#555}
#tdc-v7-system .tdc-order-form :is(input,select){border:1px solid var(--tdc-line);padding:10px 12px;min-height:44px;background:#fff;color:#111;width:100%}
#tdc-v7-system .tdc-order-form select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;
 background-image:linear-gradient(45deg,transparent 50%,#111 50%),linear-gradient(135deg,#111 50%,transparent 50%);
 background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
 background-size:6px 6px,6px 6px;background-repeat:no-repeat}
#tdc-v7-system .tdc-order-form input:focus-visible{outline:2px solid #111;outline-offset:-2px}
#tdc-v7-system .tdc-order-form button{background:#111;color:#fff;border:1px solid #111;padding:12px 16px;min-height:44px;font-weight:600;cursor:pointer;text-align:left}
#tdc-v7-system .tdc-order-form button:hover{background:#333;border-color:#333}
#tdc-v7-system .tdc-form-note{color:#555}

#tdc-v7-system .tdc-portrait img{display:block;width:100%;height:auto;border:1px solid var(--tdc-line);margin-bottom:var(--tdc-gap)}
#tdc-v7-system .tdc-portrait-role{margin-bottom:var(--tdc-gap)}
#tdc-v7-system .tdc-portrait-role strong{color:#111}
#tdc-v7-system .tdc-portrait-links{padding-top:var(--tdc-gap);border-top:1px solid var(--tdc-line)}

#tdc-v7-system .tdc-facts{margin:0;padding-top:var(--tdc-gap);border-top:1px solid var(--tdc-line)}
#tdc-v7-system .tdc-facts dt{font-weight:600;color:#111;margin-bottom:4px}
#tdc-v7-system .tdc-facts dd{margin:0 0 16px;color:#444}
#tdc-v7-system .tdc-facts dd:last-child{margin-bottom:0}
@container(max-width:899px){#tdc-v7-system .tdc-portrait{grid-row:1}#tdc-v7-system .tdc-portrait img{max-width:260px}}

#tdc-v7-system .tdc-timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
#tdc-v7-system .tdc-timeline li{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr);gap:16px;padding:14px 0;border-top:1px solid var(--tdc-line)}
#tdc-v7-system .tdc-timeline li:first-child{border-top:0;padding-top:0}
#tdc-v7-system .tdc-timeline-when{font-weight:600;color:#111}
#tdc-v7-system .tdc-timeline-what{color:#444}

#tdc-v7-system .tdc-byline{margin-top:var(--tdc-pad);padding-top:var(--tdc-gap);border-top:1px solid var(--tdc-line)}
#tdc-v7-system .tdc-byline>p:first-child{color:#555}
#tdc-v7-system .tdc-byline-date{color:#555}
#tdc-v7-system .tdc-guide-filters{display:flex;flex-wrap:wrap;align-items:end;gap:var(--tdc-gap);padding:var(--tdc-pad);border-bottom:1px solid var(--tdc-line)}
#tdc-v7-system .tdc-guide-search{display:block;flex:1 1 260px;color:#555}
#tdc-v7-system .tdc-guide-search input{display:block;width:100%;margin-top:8px;border:1px solid var(--tdc-line);background:#fff;color:#111;padding:12px;min-height:44px}
#tdc-v7-system .tdc-chips{display:flex;flex-wrap:wrap;gap:8px}
#tdc-v7-system .tdc-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid var(--tdc-line);background:#fff;color:#111;cursor:pointer;font-weight:600}
#tdc-v7-system .tdc-chip:hover{background:#f5f5f5}
#tdc-v7-system .tdc-chip[aria-pressed="true"]{background:#111;border-color:#111}
#tdc-v7-system .tdc-chip[aria-pressed="true"],#tdc-v7-system .tdc-chip[aria-pressed="true"] *{color:#fff}
#tdc-v7-system .tdc-chip-n{font-weight:400;opacity:.7}
#tdc-v7-system .tdc-guide-tag{display:block;margin-top:var(--tdc-gap);color:#555}
#tdc-v7-system .tdc-guide-empty{padding:var(--tdc-pad);color:#555}

#tdc-v7-system .tdc-checkout-mount{margin-top:var(--tdc-gap);min-height:320px}
#tdc-v7-system .tdc-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* GUIDE PAGE. Built for scanning, not studying: a reader arrives scared and
   skimming for the step that applies to them. */
#tdc-v7-system .tdc-crumbs{padding:14px var(--tdc-pad);border-bottom:1px solid var(--tdc-line);color:#6b6b6b;font-size:12px}
#tdc-v7-system .tdc-crumbs a{color:#6b6b6b}
#tdc-v7-system .tdc-crumbs a:hover{color:#111;text-decoration:underline}
#tdc-v7-system .tdc-crumbs span{margin:0 6px}
/* The sidebar sticks inside the scrolling main so the section list and the service
   CTA stay reachable at any depth, instead of only after a scroll to the bottom. */
#tdc-v7-system .tdc-contents-inner{position:sticky;top:0}
#tdc-v7-system .tdc-contents nav a{display:block;padding:10px 12px;margin:0 -12px;color:#444}
#tdc-v7-system .tdc-contents nav a:hover{background:#f5f5f5}
#tdc-v7-system .tdc-contents nav a[aria-current="true"]{color:#111;font-weight:600}
#tdc-v7-system .tdc-sidebar-cta .tdc-cta{font-weight:600}
@container(max-width:899px){
 /* On a phone the section list is a jump menu at the top, and the sticky is
    dropped: a sticky block inside a single scrolling column just eats the screen. */
 #tdc-v7-system .tdc-contents-inner{position:static}
 #tdc-v7-system .tdc-contents nav{display:grid;gap:0}
}