/*
 * Commercial landing pages (/internal-package-tracking-software/,
 * /mailroom-management-software/, /package-tracking-software/,
 * /parcel-management-software/) - loaded alongside style.css on those pages only.
 *
 * Same approach as track.css, trust.css, videos.css and integrations.css:
 * semantic markup, BEM-ish .tzc__* classes, tokens scoped to the .tzc root,
 * values taken from the site palette so these read as standard Traizr pages
 * without pulling in Elementor's hash-ID CSS.
 *
 * The first half is integrations.css with the prefix swapped, deliberately - the
 * shared furniture (hero, waves, navy band, chips, cards, steps, disclosures,
 * buttons) has to be pixel-identical to the rest of the site, and a copy that
 * cannot be broken by an edit to another section is worth the duplication. The
 * second half is the components only these pages need.
 *
 * NOTE 1: --tzc-primary is #1C6BA6, not #2582C5. style.css declares
 * .elementor-kit-7 twice and the later block overrides primary. Inline SVG icons
 * hard-code stroke #2582C5, so icon blue and button blue genuinely differ here.
 *
 * NOTE 2: the font-family below is currently inert - the tail of style.css forces
 * a system stack with `body,body *{...!important}`. Kept so these pages follow the
 * rest of the site if that temporary block is reverted.
 *
 * NOTE 3: every colour rule that lands on an <a> is written `.tzc .tzc__x`, not
 * `.tzc__x`. style.css has `.elementor-kit-7 a{color:var(--e-global-color-secondary)}`
 * and the body carries elementor-kit-7 - one class plus one element beats one
 * class, so a single-class rule loses and the label comes out the site's link
 * blue. Two classes wins. Do not "tidy" the .tzc prefix away.
 */

.tzc{
  --tzc-primary:#1C6BA6;
  --tzc-primary-dark:#155884;
  --tzc-secondary:#70B2E2;
  --tzc-btn-ink:#0D2B45;
  --tzc-icon:#2582C5;
  --tzc-navy:#185B8D;
  --tzc-ink:#0F2C43;
  --tzc-text:#40596B;
  --tzc-muted:#616F7D;
  --tzc-border:#DCE9F6;
  --tzc-border-strong:#AED4F0;
  --tzc-wash:#F0F5FF;
  --tzc-radius:50px;
  --tzc-radius-sm:18px;
  --tzc-shadow:0 0 10px 0 rgba(0,0,0,.1);
  --tzc-shadow-soft:0 0 10px 0 rgba(0,0,0,.05);
  font-family:"Inter Tight","Inter",system-ui,sans-serif;
  color:var(--tzc-text);
}
.tzc *,.tzc *::before,.tzc *::after{box-sizing:border-box}
@media(max-width:767px){.tzc{--tzc-radius-sm:14px}}

.tzc__wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.tzc__wrap--narrow{max-width:900px}

/* ---------- Sections ---------- */
.tzc__section{padding:60px 0;background:#fff}
.tzc__section--wash{background:var(--tzc-wash)}
.tzc__section--tight{padding:38px 0}
@media(max-width:767px){
  .tzc__section{padding:42px 0}
  .tzc__section--tight{padding:28px 0}
}

.tzc__head{text-align:center;max-width:820px;margin:0 auto 34px}
.tzc__head--left{text-align:left;margin-left:0}
.tzc__eyebrow{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tzc-primary);background:#FBFCFF;
  border:.5px solid var(--tzc-primary);border-radius:var(--tzc-radius);padding:8px 22px;
  margin:0 0 18px;box-shadow:var(--tzc-shadow-soft)}
/* h2/h3 reset: style.css sets its own sizes plus h2{padding-top:20px} */
.tzc h2{font-size:clamp(26px,3.6vw,38px);font-weight:700;line-height:1.2;
  color:var(--tzc-navy);margin:0 0 12px;padding-top:0}
.tzc h3{font-size:19px;font-weight:600;line-height:1.3;color:var(--tzc-navy);margin:0 0 8px}
.tzc__lede{font-size:18px;line-height:1.65;color:var(--tzc-muted);margin:0}
.tzc__prose{font-size:16px;line-height:1.75;color:var(--tzc-text);max-width:760px}
.tzc__prose p{margin:0 0 14px}
.tzc__prose p:last-child{margin-bottom:0}
.tzc .tzc__prose a,.tzc .tzc__lede a,.tzc .tzc__ticks a{color:var(--tzc-primary);
  text-decoration:underline}
.tzc .tzc__prose a:hover,.tzc .tzc__lede a:hover,.tzc .tzc__ticks a:hover{
  color:var(--tzc-primary-dark);text-decoration:none}
/* on the navy band the primary blue is unreadable, so links there go light */
.tzc__section--navy .tzc__lede a,.tzc__cta .tzc__lede a{color:#fff}
@media(max-width:767px){.tzc__lede{font-size:16px}}

/* ---------- Breadcrumb ---------- */
.tzc__crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0;padding:0;font-size:13px;color:var(--tzc-muted)}
.tzc__crumbs li{display:flex;align-items:center;gap:8px}
.tzc__crumbs li+li::before{content:"/";color:#9DB3C4}
.tzc .tzc__crumbs a{color:var(--tzc-muted);text-decoration:none}
.tzc .tzc__crumbs a:hover{color:var(--tzc-primary);text-decoration:underline}
.tzc__crumbs [aria-current]{color:var(--tzc-navy);font-weight:500}

/* ---------- Hero ---------- */
/* Top padding clears the header, which floats over the top of the page. */
.tzc__hero{background:linear-gradient(180deg,var(--tzc-wash) 0%,#fff 100%);
  padding:clamp(132px,12vw,180px) 0 10px}
.tzc__hero--center{text-align:center}
.tzc__hero h1{font-size:clamp(27px,4.2vw,43px);font-weight:700;line-height:1.15;
  color:var(--tzc-navy);margin:0 0 14px}
.tzc__hero .tzc__lede{max-width:740px}
.tzc__hero--center .tzc__lede{margin-left:auto;margin-right:auto}
.tzc__hero-top{padding-bottom:22px}
@media(max-width:767px){.tzc__hero{padding-top:112px}}

/* ---------- Icon chip ---------- */
.tzc__ico{flex:none;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:14px;background:var(--tzc-wash);
  border:1px solid #E3EEFA;color:var(--tzc-icon)}
.tzc__ico svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.tzc__ico--sm{width:36px;height:36px;border-radius:11px}
.tzc__ico--sm svg{width:18px;height:18px}

/* ---------- Card grid ---------- */
.tzc__grid{list-style:none;margin:0;padding:0;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
/* One or two cards in an auto-fill grid strand themselves against the left edge.
   Used by the cross-link strip while the cluster is still being built out. */
.tzc__grid--few{grid-template-columns:repeat(auto-fit,minmax(320px,400px));
  justify-content:center}
@media(max-width:560px){.tzc__grid,.tzc__grid--few{grid-template-columns:1fr}}
.tzc .tzc__card{display:flex;gap:16px;align-items:flex-start;height:100%;
  background:#fff;border:1px solid var(--tzc-border);border-radius:var(--tzc-radius-sm);
  padding:20px 22px;text-decoration:none;color:var(--tzc-text);
  box-shadow:var(--tzc-shadow-soft);transition:border-color .15s,box-shadow .15s,color .15s}
.tzc .tzc__card:hover,.tzc .tzc__card:focus{border-color:var(--tzc-border-strong);
  box-shadow:var(--tzc-shadow);text-decoration:none;color:var(--tzc-text)}
.tzc .tzc__card:focus-visible{outline:3px solid var(--tzc-icon);outline-offset:2px}
.tzc__card h3{margin:0 0 5px;font-size:16.5px}
.tzc__card p{margin:0;font-size:14px;line-height:1.6;color:var(--tzc-muted)}
.tzc__card-more{display:inline-block;margin-top:9px;font-size:13.5px;font-weight:600;
  color:var(--tzc-primary)}

/* ---------- Fact list ---------- */
.tzc__facts{list-style:none;margin:0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.tzc__facts li{display:flex;gap:16px;align-items:flex-start;background:#fff;
  border:1px solid var(--tzc-border);border-radius:var(--tzc-radius-sm);
  padding:22px 24px;box-shadow:var(--tzc-shadow-soft)}
.tzc__facts h3{margin:0 0 5px;font-size:16.5px}
.tzc__facts p{margin:0;font-size:14.5px;line-height:1.65;color:var(--tzc-muted)}
@media(max-width:767px){.tzc__facts li{padding:18px 18px;gap:14px}}

/* ---------- Numbered workflow ---------- */
.tzc__steps{list-style:none;margin:0;padding:0;counter-reset:tzcstep;display:grid;gap:14px}
.tzc__steps li{counter-increment:tzcstep;display:flex;gap:18px;align-items:flex-start;
  background:#fff;border:1px solid var(--tzc-border);border-radius:var(--tzc-radius-sm);
  padding:20px 24px;box-shadow:var(--tzc-shadow-soft)}
.tzc__steps li::before{content:counter(tzcstep);flex:none;width:38px;height:38px;border-radius:50%;
  background:var(--tzc-primary);color:#fff;font-size:15px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.tzc__steps h3{margin:0 0 5px;font-size:16.5px}
.tzc__steps p{margin:0;font-size:14.5px;line-height:1.65;color:var(--tzc-muted)}

/* ---------- Screenshot figure ---------- */
.tzc__shot{margin:0}
.tzc__shot-frame{display:block;background:linear-gradient(158deg,#F5F9FF 0%,#E4EFFA 100%);
  border:1px solid #E3EEFA;border-radius:var(--tzc-radius-sm);padding:clamp(10px,1.4vw,16px)}
.tzc__shot-frame img{display:block;width:100%;height:auto;border-radius:10px;
  box-shadow:0 10px 30px rgba(15,44,67,.13)}
.tzc__shot figcaption{margin:12px 2px 0;font-size:13.5px;line-height:1.6;color:var(--tzc-muted)}
/* Some product screens were exported onto a square canvas and carry empty page
   background below the UI. Trim it in the frame rather than re-exporting the
   asset: aspect-ratio is fixed so this costs no layout shift, and object-position
   keeps the top of the screen, which is the part being referred to. The ratio
   differs per screen, so pass it inline: style="--tzc-trim:1024/700". */
.tzc__shot-frame--trim img{aspect-ratio:var(--tzc-trim,1024/845);
  object-fit:cover;object-position:top center}
.tzc__shots{display:grid;gap:26px;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}

/* ---------- Callout ---------- */
.tzc__callout{display:flex;gap:18px;align-items:flex-start;background:var(--tzc-wash);
  border:1px solid #E3EEFA;border-left:4px solid var(--tzc-primary);
  border-radius:var(--tzc-radius-sm);padding:22px 24px;margin:26px 0}
.tzc__callout p{margin:0;font-size:16px;line-height:1.7;color:var(--tzc-ink)}
.tzc__callout .tzc__ico{background:#fff}
/* two classes, or `.elementor-kit-7 a` wins and the link comes out too pale to
   read against the callout's own wash background */
.tzc .tzc__callout a{color:var(--tzc-primary);text-decoration:underline}
.tzc .tzc__callout a:hover{color:var(--tzc-primary-dark);text-decoration:none}

/* ---------- FAQ disclosures ---------- */
.tzc__disclosure{border:1px solid var(--tzc-border);border-radius:var(--tzc-radius-sm);
  background:#fff;padding:2px 22px;margin:0 0 10px;box-shadow:var(--tzc-shadow-soft)}
.tzc__disclosure summary{cursor:pointer;list-style:none;padding:16px 0;
  font-size:16px;font-weight:600;color:var(--tzc-navy);display:flex;align-items:center;gap:12px}
.tzc__disclosure summary::-webkit-details-marker{display:none}
.tzc__disclosure summary::after{content:"";flex:none;width:9px;height:9px;margin-left:auto;
  margin-right:4px;border-right:2px solid var(--tzc-primary);border-bottom:2px solid var(--tzc-primary);
  transform:rotate(45deg)}
.tzc__disclosure[open] summary::after{transform:rotate(-135deg)}
.tzc__disclosure summary:focus-visible{outline:3px solid var(--tzc-icon);outline-offset:2px}
.tzc__disclosure-body{padding:0 0 18px;font-size:15px;line-height:1.8;color:var(--tzc-text)}
.tzc__disclosure-body p{margin:0 0 12px}
.tzc__disclosure-body p:last-child{margin-bottom:0}
.tzc .tzc__disclosure-body a{color:var(--tzc-primary);text-decoration:underline}

/* ---------- Buttons ---------- */
.tzc__btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:inherit;font-size:15px;font-weight:600;line-height:1;text-align:center;
  text-decoration:none;border-radius:var(--tzc-radius);border:1px solid transparent;
  padding:15px 30px;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.tzc .tzc__btn--primary{background:var(--tzc-primary);border-color:var(--tzc-primary);color:#fff}
.tzc .tzc__btn--primary:hover,.tzc .tzc__btn--primary:focus{background:var(--tzc-primary-dark);
  border-color:var(--tzc-primary-dark);color:#fff;text-decoration:none}
.tzc .tzc__btn--secondary{background:var(--tzc-secondary);border-color:var(--tzc-secondary);
  color:var(--tzc-btn-ink)}
.tzc .tzc__btn--secondary:hover,.tzc .tzc__btn--secondary:focus{background:#5FA4D6;
  border-color:#5FA4D6;color:var(--tzc-btn-ink);text-decoration:none}
.tzc .tzc__btn--outline{background:#fff;border-color:var(--tzc-border-strong);color:var(--tzc-primary)}
.tzc .tzc__btn--outline:hover,.tzc .tzc__btn--outline:focus{border-color:var(--tzc-primary);
  color:var(--tzc-primary-dark);text-decoration:none}
.tzc .tzc__btn--ghost{background:transparent;border-color:#fff;color:#fff}
.tzc .tzc__btn--ghost:hover,.tzc .tzc__btn--ghost:focus{background:#fff;color:var(--tzc-navy);
  text-decoration:none}
.tzc__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.tzc__actions--center{justify-content:center}

/* ---------- Closing CTA band ---------- */
.tzc__cta{position:relative;overflow:hidden;background:var(--tzc-navy);
  color:#DCEEFA;text-align:center;padding:96px 0 84px}
.tzc__cta h2{color:#fff}
.tzc__cta .tzc__lede{color:#C9DCEC;margin-left:auto;margin-right:auto;max-width:720px}
@media(max-width:767px){.tzc__cta{padding:74px 0 62px}}

/* The site's animated headline, reused verbatim from features.php. Its typography
   there comes from Elementor hash-ID CSS we deliberately do not pull in, so the
   two rules that matter are restated: the home page runs it at 50px / 600, with
   the rotating word a shade lighter than the fixed words. Without the colour
   rules the dynamic span falls back to a stray Elementor default that reads as
   off-palette tan. */
.tzc__cta .elementor-headline{font-size:clamp(30px,4.4vw,50px);font-weight:600;
  line-height:1.2;margin:0 0 8px;padding-top:0;text-align:center}
.tzc__cta .elementor-headline-plain-text{color:#fff}
.tzc__cta .elementor-headline-dynamic-text{color:var(--tzc-secondary)}

/* ---------- Hero: dotted world-map overlay ----------
 * The home page hero signature, also used on /trust/ and /integrations/. 3%
 * opacity, sits under the content, pointer-events off so it never intercepts a
 * click.
 */
.tzc__hero{position:relative;overflow:hidden}
.tzc__hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.03;
  background-image:url(/assets/images/2026/04/dotted-word-map.webp);
  background-position:center center;background-repeat:no-repeat;background-size:contain}
.tzc__hero > *{position:relative;z-index:1}

/* ---------- Hero chip row ----------
 * Mirrors the Cloud Based / GDPR Compliant / iOS & Android chips under the home
 * page hero.
 */
.tzc__chips{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0;padding:0}
.tzc__hero--center .tzc__chips{justify-content:center}
.tzc__chips li{display:flex;align-items:center;gap:10px;background:#fff;
  border:1px solid var(--tzc-border-strong);border-radius:14px;padding:11px 18px 11px 12px;
  font-size:14px;font-weight:600;color:var(--tzc-navy);box-shadow:var(--tzc-shadow-soft)}
.tzc__chips .tzc__ico{width:32px;height:32px;border-radius:9px}
.tzc__chips .tzc__ico svg{width:17px;height:17px}
@media(max-width:600px){.tzc__chips li{font-size:13px;padding:9px 14px 9px 10px}}

/* ---------- Wave dividers ----------
 * Uses the site's own .elementor-shape markup so the curve is literally the same
 * shape as the home page, not a lookalike. style.css positions the shape but
 * sets no height and defaults the fill to #fff, so both are set here, and each
 * fill MUST match the background of the ADJACENT section or the wave renders as
 * a white seam.
 */
.tzc__section,.tzc__cta{position:relative}
.tzc__section > .elementor-shape svg,.tzc__cta > .elementor-shape svg{height:50px}
@media(max-width:767px){
  .tzc__section > .elementor-shape svg,.tzc__cta > .elementor-shape svg{height:30px}
}
.tzc__shape--from-white > .elementor-shape-top .elementor-shape-fill{fill:#FFFFFF}
.tzc__shape--from-wash  > .elementor-shape-top .elementor-shape-fill{fill:#F0F5FF}
.tzc__shape--to-white   > .elementor-shape-bottom .elementor-shape-fill{fill:#FFFFFF}
.tzc__shape--to-wash    > .elementor-shape-bottom .elementor-shape-fill{fill:#F0F5FF}
/* the navy band needs room for a wave top and bottom */
.tzc__section--navy{background:var(--tzc-navy);color:#DCEEFA;padding:104px 0}
.tzc__section--navy h2,.tzc__section--navy h3{color:#fff}
.tzc__section--navy .tzc__lede{color:#C9DCEC}
.tzc__section--navy .tzc__ico{background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.28);color:#fff}
.tzc__section--navy .tzc__facts li{background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.18);box-shadow:none}
.tzc__section--navy .tzc__facts p{color:#C4D8EA}
.tzc__section--navy .tzc__eyebrow{color:#fff;background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.45);box-shadow:none}
/* cards stay white on the navy band - the home page dark-section pattern */
.tzc__section--navy .tzc__card h3{color:var(--tzc-navy)}
@media(max-width:767px){.tzc__section--navy{padding:80px 0}}

/* ---------- Stat strip ---------- */
.tzc__stats{list-style:none;margin:0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.tzc__stats li{text-align:center;background:#fff;border:1px solid var(--tzc-border);
  border-radius:var(--tzc-radius-sm);padding:24px 20px;box-shadow:var(--tzc-shadow-soft)}
.tzc__stat-n{display:block;font-size:clamp(28px,3.4vw,38px);font-weight:700;
  color:var(--tzc-primary);line-height:1.1;margin-bottom:4px}
.tzc__stat-l{display:block;font-size:14px;line-height:1.5;color:var(--tzc-muted)}


/* ============================================================================
 * Components specific to the commercial pages.
 * ==========================================================================*/

/* ---------- Split hero: copy left, product screen right ----------
 * The main-page hero shape (home page, solutions pages). Copy comes first in the
 * source so it is what a screen reader and a crawler meet first, and the image
 * is the LCP element on desktop, so it is NOT lazy loaded.
 */
.tzc__hero-split{display:grid;gap:clamp(28px,4vw,54px);align-items:center;
  grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
@media(max-width:900px){.tzc__hero-split{grid-template-columns:1fr;gap:30px}}
.tzc__hero-media{margin:0}
.tzc__hero-media .tzc__shot-frame{padding:clamp(8px,1vw,12px)}
.tzc__hero .tzc__actions{margin-top:28px}
/* the split hero's copy column is narrower than a full-width one, so the chip
   row is tightened here to keep three chips on one line at desktop widths */
.tzc__hero-split .tzc__chips li{padding:9px 15px 9px 10px;font-size:13.5px;gap:9px}
.tzc__hero-split .tzc__chips .tzc__ico{width:29px;height:29px;border-radius:8px}
.tzc__hero-split .tzc__chips .tzc__ico svg{width:16px;height:16px}

/* ---------- Problem list ----------
 * The failure modes of a manual process. Not a feature grid - these are the
 * reader's own experience, so they read as short statements with a muted mark
 * rather than a bright icon tile.
 */
.tzc__pains{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.tzc__pains li{display:flex;gap:14px;align-items:flex-start;background:#fff;
  border:1px solid var(--tzc-border);border-left:3px solid #E4A0A0;
  border-radius:var(--tzc-radius-sm);padding:16px 20px;font-size:15px;line-height:1.6}
.tzc__pains strong{display:block;color:var(--tzc-navy);font-weight:600;margin-bottom:3px}
.tzc__pains span{color:var(--tzc-muted);font-size:14.5px}

/* ---------- Custody record ----------
 * The chain-of-custody section: one row per event in an item's life, each
 * showing what the system captures at that moment. A left rule with a node per
 * row reads as a sequence without needing a drawn diagram, and it degrades to a
 * plain list on a narrow screen.
 */
.tzc__custody{list-style:none;margin:0;padding:0;position:relative}
.tzc__custody::before{content:"";position:absolute;left:19px;top:14px;bottom:14px;
  width:2px;background:linear-gradient(180deg,var(--tzc-border-strong),var(--tzc-border));
  border-radius:2px}
.tzc__custody li{position:relative;display:grid;gap:4px 20px;padding:0 0 24px 56px;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.tzc__custody li:last-child{padding-bottom:0}
.tzc__custody li::before{content:"";position:absolute;left:12px;top:6px;width:16px;height:16px;
  border-radius:50%;background:#fff;border:3px solid var(--tzc-primary);box-sizing:border-box}
.tzc__custody h3{grid-column:1;margin:0 0 3px;font-size:16.5px}
.tzc__custody p{grid-column:1;margin:0;font-size:14.5px;line-height:1.65;color:var(--tzc-muted)}
.tzc__custody-cap{grid-column:2;grid-row:1 / span 2;align-self:start;
  background:var(--tzc-wash);border:1px solid #E3EEFA;border-radius:12px;padding:12px 16px;
  font-size:13.5px;line-height:1.6;color:var(--tzc-ink)}
.tzc__custody-cap b{display:block;font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tzc-primary);margin-bottom:5px}
@media(max-width:820px){
  .tzc__custody li{grid-template-columns:1fr}
  .tzc__custody-cap{grid-column:1;grid-row:auto;margin-top:10px}
}
@media(max-width:600px){
  .tzc__custody li{padding-left:44px}
  .tzc__custody::before{left:13px}
  .tzc__custody li::before{left:6px}
}

/* ---------- Comparison table ----------
 * Two columns, manual process against Traizr. On a narrow screen the table
 * stacks into labelled pairs via the data-th attribute rather than scrolling
 * sideways, because the whole point is reading the two side by side.
 */
.tzc__table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tzc .tzc__table{width:100%;border-collapse:separate;border-spacing:0;
  background:#fff;border:1px solid var(--tzc-border);border-radius:var(--tzc-radius-sm);
  overflow:hidden;box-shadow:var(--tzc-shadow-soft);font-size:15px}
/* style.css ships WordPress' generic table styling: `table td,table th` gives every
   cell a grey 1px box, and `table tbody>tr:nth-child(odd)>td` stripes the rows. Both
   are reset here rather than left to show through - two classes beats either. */
.tzc .tzc__table th,.tzc .tzc__table td{text-align:left;padding:15px 20px;
  border:0;border-bottom:1px solid var(--tzc-border);background:transparent;
  vertical-align:top;line-height:1.6}
.tzc .tzc__table thead th{background:var(--tzc-wash);color:var(--tzc-navy);
  font-size:14px;font-weight:700;letter-spacing:.02em}
.tzc .tzc__table tbody tr:last-child th,.tzc .tzc__table tbody tr:last-child td{border-bottom:0}
.tzc .tzc__table tbody th{font-weight:500;color:var(--tzc-muted);width:44%}
.tzc .tzc__table td{color:var(--tzc-ink);font-weight:500}
/* The tick hangs off the inner span, not the cell, which leaves the cell's own
   ::before free to carry the stacked-layout label below. */
.tzc .tzc__table td span{display:flex;gap:10px;align-items:flex-start}
.tzc .tzc__table td span::before{content:"";flex:none;width:16px;height:16px;margin-top:3px;
  background:no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E7A47' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
/* Below 700px the two columns stack into one card per row, each half carrying its
   own label from data-th. Side-by-side reading is the whole point of this table,
   so it must not become a sideways scroll. */
@media(max-width:700px){
  .tzc .tzc__table{border:0;background:transparent;box-shadow:none;overflow:visible}
  .tzc .tzc__table,.tzc .tzc__table tbody,.tzc .tzc__table tr,
  .tzc .tzc__table th,.tzc .tzc__table td{display:block;width:auto}
  .tzc .tzc__table thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  .tzc .tzc__table tbody tr{background:#fff;border:1px solid var(--tzc-border);
    border-radius:var(--tzc-radius-sm);box-shadow:var(--tzc-shadow-soft);
    padding:16px 20px;margin:0 0 12px}
  .tzc .tzc__table tbody tr:last-child{margin-bottom:0}
  .tzc .tzc__table tbody th,.tzc .tzc__table tbody td{width:auto;padding:0;
    border:0;background:transparent}
  .tzc .tzc__table tbody th{padding-bottom:13px;margin-bottom:13px;
    border-bottom:1px dashed var(--tzc-border)}
  .tzc .tzc__table tbody th::before,.tzc .tzc__table tbody td::before{
    content:attr(data-th);display:block;font-size:11px;font-weight:700;letter-spacing:.07em;
    text-transform:uppercase;margin-bottom:5px}
  .tzc .tzc__table tbody th::before{color:#A86B6B}
  .tzc .tzc__table tbody td::before{color:#1E7A47}
}

/* ---------- Tag list ---------- */
.tzc__tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.tzc__tags li{display:flex;align-items:center;gap:11px;background:#fff;
  border:1px solid var(--tzc-border);border-radius:var(--tzc-radius);
  padding:9px 20px 9px 10px;font-size:14.5px;font-weight:500;color:var(--tzc-ink);
  box-shadow:var(--tzc-shadow-soft)}
.tzc__tags .tzc__ico{width:32px;height:32px;border-radius:9px}
.tzc__tags .tzc__ico svg{width:17px;height:17px}
/* --links: the same pill, but each one is a link. The padding moves onto the
   anchor so the whole pill is the hit area rather than just the words. */
.tzc__tags--links li{padding:0}
.tzc .tzc__tags--links a{display:flex;align-items:center;gap:11px;
  padding:9px 20px 9px 10px;border-radius:var(--tzc-radius);
  color:var(--tzc-ink);text-decoration:none;transition:color .15s}
.tzc .tzc__tags--links a:hover,.tzc .tzc__tags--links a:focus{color:var(--tzc-primary);
  text-decoration:none}
.tzc .tzc__tags--links a:focus-visible{outline:3px solid var(--tzc-icon);outline-offset:2px}

/* ---------- Media row: prose beside a screenshot ---------- */
.tzc__media{display:grid;gap:clamp(24px,3.4vw,44px);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.tzc__media--flip .tzc__media-copy{order:2}
@media(max-width:767px){.tzc__media--flip .tzc__media-copy{order:0}}
.tzc__media-copy h3{font-size:clamp(20px,2.4vw,25px);margin-bottom:10px}

/* ---------- Ticked list ---------- */
.tzc__ticks{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:11px}
.tzc__ticks li{position:relative;padding-left:30px;font-size:15px;line-height:1.6;
  color:var(--tzc-text)}
.tzc__ticks li::before{content:"";position:absolute;left:0;top:3px;width:19px;height:19px;
  border-radius:50%;background:var(--tzc-wash) no-repeat center/11px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C6BA6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}

/* ---------- Motion ----------
 * Deliberately restrained. The site's performance rules kill decorative motion,
 * so this is one cheap effect: opacity + a 14px rise, transform/opacity only so
 * it stays on the compositor, triggered once by IntersectionObserver and then
 * unobserved. No scroll handlers, no layout-affecting properties.
 *
 * The no-JS and reduce-motion paths both show content immediately - nothing here
 * is required to read the page.
 */
@media (prefers-reduced-motion:no-preference){
  .tzc-js [data-tzc-rise]{opacity:0;transform:translateY(14px);
    transition:opacity .5s ease,transform .5s ease}
  .tzc-js [data-tzc-rise].is-in{opacity:1;transform:none}
  /* a short stagger reads as one movement rather than four separate ones */
  .tzc-js [data-tzc-rise].is-in:nth-child(2){transition-delay:.06s}
  .tzc-js [data-tzc-rise].is-in:nth-child(3){transition-delay:.12s}
  .tzc-js [data-tzc-rise].is-in:nth-child(4){transition-delay:.18s}
  /* cards lift slightly on hover - the only hover motion on the page */
  .tzc .tzc__card{transition:border-color .15s,box-shadow .15s,color .15s,transform .15s}
  .tzc .tzc__card:hover{transform:translateY(-2px)}
}