@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-foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--tdc-gap);padding:var(--tdc-pad);border-top:1px solid var(--tdc-line)}
#tdc-v7-system .tdc-foot div{display:flex;flex-direction:column;gap:8px;min-width:0}
#tdc-v7-system .tdc-foot h2{font:600 12px/1.2 var(--tdc-font);letter-spacing:.04em;text-transform:uppercase;color:#111;margin:0 0 2px}
#tdc-v7-system .tdc-foot a{font-size:13px;line-height:1.4;color:#444;text-wrap:pretty}
#tdc-v7-system .tdc-foot a:hover{color:#111;text-decoration:underline}
@container (max-width:700px){#tdc-v7-system .tdc-foot{grid-template-columns:minmax(0,1fr)}}
#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,
#tdc-v7-system .tdc-article section>:is(h2,h3):not(:first-child){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)}}

/* PROSE LISTS ONLY, scoped 2026-09-10. These two rules are for bulleted
   prose inside a cell. Unscoped, they also caught every COMPONENT list that
   happened to live in a cell: on the dashboard they added 18px of indent and
   10px of dead space to every row of every tile list, but only on the pages
   whose layout loaded this sheet, so one component rendered two ways and no
   test could see it. That cost a month. `:not([class])` keeps them doing
   their real job and stops them reaching anything a component owns.
   Verified pixel-neutral across the whole public site before shipping. */
#tdc-v7-system .tdc-cell ul:not([class]){margin:0;padding-left:18px}
#tdc-v7-system .tdc-cell ul:not([class]) 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}
}

/* 0918: native checkboxes share the existing form scale. */
#tdc-v7-system .tdc-order-form input[type=checkbox]{appearance:auto;width:20px;min-height:20px;height:20px;padding:0;margin:0;accent-color:#111}

/* Audience rows share a consistent reading rhythm and aligned action baseline. */
#tdc-v7-system .tdc-page[data-page] .tdc-issues>.tdc-cell,
#tdc-v7-system .tdc-page[data-page] .tdc-bottom>.tdc-cell{display:flex;flex-direction:column;gap:var(--tdc-gap)}
#tdc-v7-system .tdc-page[data-page] :is(.tdc-issues,.tdc-bottom)>.tdc-cell>:is(h2,h3,p){margin:0}
#tdc-v7-system .tdc-page[data-page] :is(.tdc-issues,.tdc-bottom)>.tdc-cell>.tdc-cta{margin-top:auto;padding-top:4px}