/**
 * Homepage below-hero sections (product canvas, audit wedge, integrations,
 * reviews) — "Harvest" design language. Ported from the approved prototype.
 *
 * EVERYTHING is scoped under .tr-below so the prototype's warm palette, its
 * global base rules (*, a, p, h2-h4) and its generic class names (.sec, .wrap,
 * .tab, .panel, .rev-card, .eyebrow) never leak into the shared Elementor
 * header/footer. Each ported section is wrapped in <div class="tr-below">.
 *
 * @package Hello_Elementor_Child
 */

/* Inter is the below-hero --sans; the theme ships the file but home.css only
   declares Besley + Geist, so declare Inter here (local woff2, no CDN). */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-latin-wght-normal.woff2) format('woff2');}
/* Besley faces, added 2026-08-12. --serif has ALWAYS declared 'Besley' here, but the face only
   existed in home.css, which loads on the front page alone. Every other page using this
   stylesheet (the integration detail pages, /government-contractors/) silently fell back to
   Georgia, which is why their serif read "similar but not the same" as the homepage. The
   homepage declares these faces too; duplicate declarations are deduped by the browser. */
@font-face{font-family:'Besley';font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/besley-latin-wght.woff2) format('woff2');}
@font-face{font-family:'Besley';font-style:italic;font-weight:400 900;font-display:swap;src:url(../fonts/besley-latin-italic-wght.woff2) format('woff2');}
/* Status dots reference animation:pulse, which the prototype never defined. */
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
/* Contextual internal link under each product tab (SEO: anchor + link equity). */
.tr-below .panel .tab-link{display:inline-flex;align-items:center;gap:7px;margin-top:1.6rem;font-family:var(--sans);font-weight:650;font-size:.95rem;color:var(--green-ink);}
.tr-below .panel .tab-link:hover{color:var(--green-deep);}
.tr-below .panel .tab-link span{transition:transform .2s var(--ease);}
.tr-below .panel .tab-link:hover span{transform:translateX(3px);}
/* Visually-hidden description for the CSS-drawn mockups (keyword signal that the
   old real-screenshot <img alt> used to carry). */
.tr-below .tr-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

.tr-below{
    --paper:#FBFAF6;--cream:#F4EFE4;--card:#FFFFFF;--ink:#17190F;--muted:#5C6150;--faint:#8B917C;
    --line:#E7E4D8;--line-2:#EFEBDF;
    --green:#5FAF08;--green-deep:#34700F;--green-ink:#2C5D0E;--green-mid:#3F8514;--tint:#E9F3D6;--tint-2:#F1F7E4;
    --amber:#C98A22;--amber-tint:#F6ECD4;
    --g2:#C9660B;--g2-tint:#FBEAD6;
    --forest:#152009;--forest-2:#1E2C10;--forest-ink:#AEE562;
    --serif:'Besley',Georgia,'Times New Roman',serif;
    --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --mono:'SF Mono',ui-monospace,Menlo,monospace;
    --ease:cubic-bezier(.2,.75,.2,1);--maxw:1200px;
    --sh1:0 1px 2px rgba(20,24,14,.05),0 14px 30px -18px rgba(20,24,14,.22);
    --sh2:0 2px 10px rgba(20,24,14,.04),0 34px 70px -34px rgba(20,24,14,.30);
  }.tr-below *{box-sizing:border-box;}.tr-below{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;}.tr-below{overflow-x:clip;}.tr-below a{color:inherit;text-decoration:none;}.tr-below p{margin:0;}.tr-below h2,.tr-below h3,.tr-below h4{margin:0;font-family:var(--serif);font-weight:600;line-height:1.06;letter-spacing:-.018em;text-wrap:balance;}.tr-below .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:24px;}.tr-below .eyebrow{display:block;font-family:var(--sans);font-size:.8rem;font-weight:550;color:var(--muted);margin-bottom:.85rem;text-transform:capitalize;}.tr-below .lead{font-size:1.14rem;color:var(--muted);line-height:1.55;}.tr-below .sec{padding:clamp(66px,9vw,120px) 0;}.tr-below .shead{max-width:680px;}.tr-below .shead.mid{margin-inline:auto;text-align:center;}.tr-below .shead h2{font-size:clamp(2rem,4vw,3.1rem);margin-top:.5rem;}.tr-below .shead p{margin-top:1rem;}.tr-below .flag{display:block;font:12px/1 var(--mono);color:var(--faint);margin-bottom:8px;}/* App-window frame shared by every product mockup + the audit wedge */.tr-below .win{border-radius:15px;overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh2);}.tr-below .win-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--paper);border-bottom:1px solid var(--line);}.tr-below .win-bar i{width:9px;height:9px;border-radius:50%;background:rgba(20,24,14,.14);display:inline-block;}.tr-below .win-bar span{margin-left:8px;font:500 11.5px/1 var(--mono);color:var(--faint);}.tr-below .win-shot{aspect-ratio:16/10;background:var(--card);padding:clamp(20px,2.6vw,32px);display:flex;flex-direction:column;gap:14px;}/* Real generated mockups (from the design tool) are fixed 1280x816px documents.
     This scales them responsively to any container width while staying pixel-sharp
     (CSS transform, not a raster resize) and preserving the exact aspect ratio. */.tr-below .real-mock-wrap{position:relative;width:100%;aspect-ratio:1280/816;container-type:inline-size;border-radius:16px;overflow:hidden;}/* IMPORTANT: the divisor must be a LENGTH (1280px), not a bare number (1280).
     length / number = length, which scale() rejects as invalid (silently drops the
     whole transform, rendering at native 1280px and clipping). length / length =
     a unitless ratio, which is what scale() actually requires. */.tr-below .real-mock-inner{position:absolute;top:0;left:0;transform:scale(calc(100cqw / 1280px));transform-origin:top left;}/* ---- CSS-drawn mockup primitives (shared vocabulary across all 4 tabs) ---- */.tr-below .m-row{display:flex;align-items:center;gap:12px;}.tr-below .m-chip{display:inline-flex;align-items:center;gap:6px;font:650 12px/1 var(--sans);padding:6px 11px;border-radius:999px;}.tr-below .m-chip.ok{background:var(--tint);color:var(--green-ink);}.tr-below .m-chip.warn{background:var(--amber-tint);color:var(--amber);}.tr-below .m-btn{display:inline-flex;align-items:center;gap:6px;font:700 13px/1 var(--sans);padding:9px 16px;border-radius:999px;background:var(--green);color:#fff;}.tr-below .m-btn.gh{background:transparent;border:1px solid var(--line);color:var(--ink);}.tr-below .m-card{border:1px solid var(--line);border-radius:12px;background:var(--paper);}.tr-below .m-label{font:600 10.5px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--faint);}.tr-below .m-avatar{width:30px;height:30px;border-radius:50%;background:var(--tint);color:var(--green-ink);display:grid;place-items:center;font:700 12px var(--serif);flex:none;}/* Time tracking mockup */.tr-below .mk-timer{flex:1;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;}.tr-below .mk-timer .ring{width:88px;height:88px;border-radius:50%;background:var(--tint);display:grid;place-items:center;flex:none;}.tr-below .mk-timer .ring .play{width:0;height:0;border-left:16px solid var(--green-deep);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px;}.tr-below .mk-timer .tt{font:800 clamp(28px,3vw,38px)/1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums;}.tr-below .mk-timer .tp{font-size:14px;color:var(--muted);margin-top:4px;}.tr-below .mk-week{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;}.tr-below .mk-day{border:1px solid var(--line);border-radius:9px;padding:10px 8px;text-align:center;background:var(--paper);}.tr-below .mk-day .dl{font-size:10.5px;color:var(--faint);font-weight:600;}.tr-below .mk-day .db{margin-top:8px;height:36px;border-radius:6px;background:var(--tint);}.tr-below .mk-day.hi .db{background:var(--green);}.tr-below .mk-day.warn .db{background:var(--amber-tint);border:1.5px dashed var(--amber);}/* Approvals mockup */.tr-below .mk-app{flex:1;display:flex;flex-direction:column;gap:9px;}.tr-below .mk-app-row{display:flex;align-items:center;gap:12px;padding:12px 14px;}.tr-below .mk-app-row .nm{font-weight:700;font-size:13.5px;}.tr-below .mk-app-row .pj{font-size:11.5px;color:var(--muted);}.tr-below .mk-app-row .hrs{margin-left:auto;font:700 14px/1 var(--sans);font-variant-numeric:tabular-nums;}/* Reporting mockup */.tr-below .mk-rep{flex:1;display:grid;grid-template-rows:auto 1fr auto;gap:12px;}.tr-below .mk-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}.tr-below .mk-kpi{padding:11px 13px;}.tr-below .mk-kpi .kn{font:800 20px/1 var(--sans);letter-spacing:-.02em;}.tr-below .mk-kpi .kl{font-size:10.5px;color:var(--muted);margin-top:3px;}.tr-below .mk-chart{display:flex;align-items:flex-end;gap:8px;padding:16px 14px 12px;min-height:0;}.tr-below .mk-chart span{flex:1;border-radius:4px 4px 0 0;background:var(--tint);}.tr-below .mk-chart span.hi{background:var(--green);}.tr-below .mk-ceil{padding:12px 14px;}.tr-below .mk-ceil .cbar{height:9px;border-radius:5px;background:var(--line-2);margin:8px 0 6px;overflow:hidden;}.tr-below .mk-ceil .cbar i{display:block;height:100%;width:82%;background:linear-gradient(90deg,var(--green),var(--amber));}.tr-below .mk-ceil .cv{font-size:11.5px;color:var(--muted);}.tr-below .mk-ceil .cv b{color:var(--ink);}/* Invoicing mockup */.tr-below .mk-inv{flex:1;display:flex;flex-direction:column;gap:12px;}.tr-below .mk-inv-top{display:flex;align-items:center;justify-content:space-between;}.tr-below .mk-inv-num{font:700 16px/1 var(--serif);}.tr-below .mk-inv-tbl{flex:1;padding:6px 14px;}.tr-below .mk-inv-tr{display:grid;grid-template-columns:2.4fr .8fr 1fr;gap:8px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:12.5px;}.tr-below .mk-inv-tr.head{color:var(--faint);font-weight:650;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--line);}.tr-below .mk-inv-tr .r{text-align:right;font-variant-numeric:tabular-nums;}.tr-below .mk-inv-total{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:var(--paper);border:1px solid var(--line);border-radius:10px;}.tr-below .mk-inv-total b{font:800 18px/1 var(--sans);}/* Audit wedge mockup (light panel on the dark band) */.tr-below .mk-wedge{padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;gap:18px;}.tr-below .mk-w-toggle{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;background:var(--tint);border:1px solid color-mix(in srgb,var(--green) 30%,var(--line));border-radius:13px;}.tr-below .mk-w-toggle .wt{font-weight:700;font-size:16px;color:var(--green-ink);}.tr-below .mk-w-sw{width:44px;height:25px;border-radius:999px;background:var(--green);position:relative;flex:none;}.tr-below .mk-w-sw::after{content:"";position:absolute;top:3px;right:3px;width:19px;height:19px;border-radius:50%;background:#fff;}.tr-below .mk-w-tbl{display:flex;flex-direction:column;}.tr-below .mk-w-row{display:grid;grid-template-columns:1fr auto auto;gap:20px;align-items:center;padding:11px 4px;border-top:1px solid var(--line-2);font-size:13.5px;}.tr-below .mk-w-row:first-child{border-top:0;color:var(--faint);font:650 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;}.tr-below .mk-w-ok{color:var(--green);}/* ---------------- Marquee ---------------- */.tr-below .mq-sec{border-block:1px solid var(--line-2);background:color-mix(in srgb,var(--paper) 40%,var(--card));}.tr-below .mq-lab{text-align:center;font-size:.82rem;color:var(--muted);padding:26px 0 18px;}.tr-below .mq-lab b{color:var(--ink);font-weight:650;}.tr-below .mq{overflow:hidden;padding:2px 0 26px;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}.tr-below .mq-tr{display:flex;width:max-content;gap:58px;animation:scroll 38s linear infinite;}.tr-below .mlogo{font-family:var(--serif);font-weight:700;font-size:20px;color:var(--ink);opacity:.72;white-space:nowrap;transition:opacity .2s;}.tr-below .mlogo:hover{opacity:1;}@keyframes scroll{to{transform:translateX(calc(-50% - 29px));}}/* ---------------- Product canvas ---------------- */.tr-below .canvas{background:var(--paper);}.tr-below .tabs{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:4px;margin:clamp(30px,4vw,44px) auto 0;padding:6px;background:var(--cream);border:1px solid var(--line);border-radius:16px;width:fit-content;}
/* The child theme's style.css ships a legacy generic tab component
   (.tabs/.tab) incl. @media(max-width:768px){.tabs{flex-direction:column}} and
   .tab{flex:1}. Our ported section reuses those class names, so pin the layout
   props our scoped rules care about — flex-direction here, flex on .tab below —
   so the legacy rules can't leak in and stack/stretch our tabs. */
.tr-below .tab{flex:0 0 auto;}.tr-below .tab{border:0;background:transparent;cursor:pointer;font-family:var(--sans);font-size:15px;font-weight:600;color:var(--muted);padding:11px 20px;border-radius:11px;display:inline-flex;align-items:center;gap:9px;transition:.2s;}.tr-below .tab:hover{color:var(--ink);}/* Selected tab: white chip so it lifts cleanly off the cream bar, with the label
   and icon in deep green so the brand reads as accent rather than as a fill. A
   green FILL was tried and rejected — --tint (#E9F3D6) sits too close to the
   cream bar (#F4EFE4), so both pale warm tones went muddy. Contrast, not hue,
   was the fix. */
.tr-below .tab.on{background:var(--card);color:var(--green-mid);box-shadow:0 1px 3px rgba(20,24,14,.14),0 6px 14px -12px rgba(20,24,14,.20);}.tr-below .tab svg{width:17px;height:17px;flex:none;opacity:.6;transition:opacity .2s,color .2s;}.tr-below .tab:hover svg{opacity:.85;}.tr-below .tab.on svg{opacity:1;color:var(--green-mid);}.tr-below .panels{margin-top:clamp(34px,4.5vw,56px);position:relative;}/* All panels occupy the SAME grid cell, so .panels is always as tall as the
   tallest panel and the page stops resizing every time the tab auto-advances.
   Inactive panels use visibility (not display:none) so they still contribute
   height, while staying out of the a11y tree and tab order. */
.tr-below .panels{display:grid;}
.tr-below .panel{grid-area:1/1;display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(30px,5vw,68px);align-items:center;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .4s var(--ease);}
.tr-below .panel.on{visibility:visible;opacity:1;pointer-events:auto;}@keyframes fade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}.tr-below .panel h3{font-size:clamp(1.6rem,2.7vw,2.15rem);}.tr-below .panel .pd{color:var(--muted);margin-top:.9rem;font-size:1.06rem;line-height:1.6;max-width:34ch;}.tr-below .subs{list-style:none;margin:1.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:15px;}.tr-below .subs li{display:grid;grid-template-columns:auto 1fr;gap:12px;}.tr-below .subs .sm{color:var(--green-ink);font-weight:700;}.tr-below .subs .st{font-weight:650;font-size:.98rem;color:var(--ink);display:block;}.tr-below .subs .ss{font-size:.9rem;color:var(--muted);display:block;margin-top:2px;}.tr-below .pstage{border-radius:24px;padding:clamp(20px,3vw,44px);background:var(--tint-2);border:1px solid color-mix(in srgb,var(--green) 12%,var(--line));}@media(max-width:860px){.tr-below .panel{grid-template-columns:1fr;}}
/* Mobile/tablet: show every category at once in an even grid. A horizontal
   scroll strip hid categories 4-6 behind a swipe nobody discovers; a grid makes
   the full product surface visible and is a bigger tap target besides.
   3-up on tablet, 2-up on phones (6 labels like "Time Tracking" do not fit
   3-up at 393px without wrapping). display:grid replaces the flex row, so
   flex-wrap/overflow/mask from the base rule no longer apply. */
@media(max-width:820px){
  .tr-below .tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%;max-width:520px;margin-inline:auto;overflow:visible;}
  .tr-below .tab{justify-content:center;text-align:center;padding:10px 8px;font-size:13.5px;gap:6px;min-width:0;}
  .tr-below .tab svg{width:15px;height:15px;flex:none;}
}
@media(max-width:560px){
  .tr-below .tabs{grid-template-columns:repeat(2,1fr);max-width:360px;}
}
.tr-below .wglow{display:none;}.tr-below .wpts{max-width:960px;margin:clamp(34px,4vw,48px) auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}.tr-below .wpt{border-top:1px solid rgba(255,255,255,.14);padding-top:16px;}.tr-below .wpt .wn{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--forest-ink);color:var(--forest);font:800 12px/1 var(--sans);margin-bottom:11px;}.tr-below .wpt .wt{font-weight:700;font-size:15px;color:#fff;}.tr-below .wpt .wx{font-size:13px;color:#AEB8A0;margin-top:5px;line-height:1.45;}@media(max-width:760px){.tr-below .wpts{grid-template-columns:1fr 1fr;}}/* Clipping window at the target display size. The icon markup itself is the
     source tool's native 240x240 card; a scaled full-size copy is positioned
     absolutely inside this window (same technique as .real-mock-wrap/-inner),


@media(max-width:820px){}/* ---------------- Integrations: oversized staggered logo row ----------------
   The logos carry the section. The row lives OUTSIDE .wrap and is wider than the
   1200px content grid, clipped by the section's overflow, so it reads as bigger
   than the page. Stagger uses margin-top so transform stays free for the hover
   lift. No idle animation. */
/* Still cream — depth comes from layered washes, not a new colour:
   a soft light "spotlight" behind the logo row so the marks sit in light,
   plus two low-opacity brand-green washes on opposing corners for
   asymmetry. Deliberately different from the audit wedge's single
   top-down tint gradient so the two bands do not read as the same. */
.tr-below .integ{position:relative;overflow:hidden;
  background:
    radial-gradient(1150px 560px at 50% 46%, rgba(255,255,255,.82), rgba(255,255,255,0) 68%),
    radial-gradient(820px 440px at 12% 2%, rgba(107,188,5,.13), rgba(107,188,5,0) 64%),
    radial-gradient(880px 460px at 90% 98%, rgba(52,112,15,.10), rgba(52,112,15,0) 64%),
    var(--cream);}
/* Fine dot grid for texture — masked to a soft ellipse so it reads as depth
   behind the logos rather than tiling wallpaper to the edges. */
.tr-below .integ::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(52,112,15,.11) 1px,transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask:radial-gradient(74% 62% at 50% 46%,#000 26%,transparent 76%);
  mask:radial-gradient(74% 62% at 50% 46%,#000 26%,transparent 76%);}
.tr-below .integ .wrap{position:relative;z-index:1;}
.tr-below .integ .shead{margin-bottom:0;}
/* Wide enough that each sentence holds its own line before the explicit <br>.
   The old 46ch cap wrapped the 74-character first sentence onto two rows. */
/* These two sections use explicit <br> to control their line structure, so the
   head must be wide enough for the longest sentence (~90 chars) to hold one line.
   The default .shead is 680px, which wrapped them before the break. */
.tr-below .intel .shead,.tr-below .integ .shead{max-width:880px;}
.tr-below .integ-lead{margin-top:1rem;max-width:none;margin-inline:auto;text-wrap:pretty;}
.tr-below .integ-row{position:relative;z-index:1;display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start;
  gap:clamp(18px,3.4vw,54px);width:max-content;min-width:100%;margin:clamp(44px,6vw,76px) auto 0;
  padding-inline:clamp(20px,4vw,64px);}
/* Idle bob on .ilogo. The hover lift targets the inner .ilogo__chip, so the
   two transforms never fight. Staggered delays stop it looking mechanical. */
.tr-below .ilogo{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:14px;
  animation:ibob 6.5s ease-in-out infinite;will-change:transform;}
.tr-below .ilogo:nth-child(2){animation-delay:-1.1s;}
.tr-below .ilogo:nth-child(3){animation-delay:-2.4s;}
.tr-below .ilogo:nth-child(4){animation-delay:-3.6s;}
.tr-below .ilogo:nth-child(5){animation-delay:-4.9s;}
@keyframes ibob{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
/* Raise every other mark so the row has rhythm instead of sitting on one line. */
.tr-below .ilogo:nth-child(even){margin-top:clamp(26px,4.6vw,72px);}
.tr-below .ilogo__chip{display:grid;place-items:center;
  width:clamp(96px,13vw,188px);height:clamp(96px,13vw,188px);
  border-radius:clamp(24px,3.2vw,44px);border:1px solid rgba(20,24,14,.05);
  box-shadow:0 2px 8px rgba(20,24,14,.05),0 26px 50px -22px rgba(var(--glow,20,24,14),.50);
  transition:transform .35s var(--ease),box-shadow .35s ease;}
.tr-below .ilogo__chip img{width:58%;height:58%;object-fit:contain;}
.tr-below .ilogo:hover .ilogo__chip{transform:translateY(-10px);
  box-shadow:0 2px 8px rgba(20,24,14,.06),0 42px 68px -24px rgba(var(--glow,20,24,14),.66);}
.tr-below .ilogo__name{font:700 clamp(13px,1.1vw,16px)/1 var(--sans);color:var(--ink);letter-spacing:-.01em;}
.tr-below .integ-foot{text-align:center;margin-top:clamp(44px,6vw,76px);font-size:1rem;color:var(--muted);}
.tr-below .integ-foot b{color:var(--ink);font-weight:700;}
/* CTA on its own row beneath the foot line, matching the pattern used by the
   Intelligence and product sections rather than trailing inline. */
.tr-below .integ-cta{text-align:center;margin-top:14px;}
/* --green-mid measures 4.00:1 on the cream band, just under AA's 4.5. --green-deep is 5.28:1 on the
   same ground, so the base state takes it and hover goes a step further to --green-ink. */
.tr-below .integ-cta a{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:650;font-size:.98rem;color:var(--green-deep);}
.tr-below .integ-cta a:hover{color:var(--green-ink);}
.tr-below .integ-cta a span{transition:transform .2s var(--ease);}
.tr-below .integ-cta a:hover span{transform:translateX(3px);}
/* Phones: wrap to 3+2 so every mark stays visible without a swipe. */
/* The oversized logo row is width:max-content / nowrap and needs ~1150px.
   Its only wrapping fallback was at 760px, so every viewport between 761px
   and ~1150px forced the whole PAGE wider than the window — a horizontal
   scrollbar across the entire site at tablet and small-laptop widths.
   This intermediate step wraps it to 3 + 2 before that can happen.
   MUST stay above the 760px block below, which refines it further. */
@media(max-width:1180px){
  .tr-below .integ-row{flex-wrap:wrap;width:auto;min-width:0;max-width:780px;
    gap:clamp(20px,3vw,40px) clamp(18px,2.6vw,34px);}
  .tr-below .ilogo{width:calc(33.333% - 26px);}
  .tr-below .ilogo:nth-child(even){margin-top:0;}
}
@media(max-width:760px){
  .tr-below .integ-row{flex-wrap:wrap;width:auto;min-width:0;max-width:420px;gap:20px 18px;}
  .tr-below .ilogo{width:calc(33.333% - 12px);}
  .tr-below .ilogo:nth-child(even){margin-top:0;}
  .tr-below .ilogo__chip{width:100%;height:auto;aspect-ratio:1;border-radius:22px;}
}
.tr-below .qb-bg{background:#D9F0C6;--glow:107,188,5;}.tr-below .sage-bg{background:#D3F1E0;--glow:0,178,133;}.tr-below .sap-bg{background:#D5E6FA;--glow:59,130,246;}.tr-below .bam-bg{background:#DDF0C4;--glow:140,198,63;}.tr-below .hib-bg{background:#FBD9E2;--glow:236,72,153;}
/* ---------------- TimeRewards Intelligence ----------------
   Iridescent "Apple Intelligence" accent, deliberately restrained: the gradient
   touches only the sparkle marks and one word. Structure, Besley type and warm
   surfaces stay on-brand so it reads as this site, not a generic AI landing page.
   Matches inc/pricing-table.php's .tr-ai__* palette so both pages feel like one
   system. --i1/--i2/--i3 keep the ramp in one place. */
.tr-below .intel{--i1:#EC4899;--i2:#A855F7;--i3:#3B82F6;--i-ink:#574C7A;position:relative;background:var(--paper);overflow:hidden;}
.tr-below .intel .wrap{position:relative;z-index:1;}
/* Direct child of .intel (NOT .wrap) so inset:0 covers the whole band. Extra
   stops give a long, even falloff — a single hard stop showed a visible edge. */
.tr-below .intel-ambient{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(760px 420px at 34% -12%,rgba(168,85,247,.10),rgba(168,85,247,.045) 45%,transparent 78%),
             radial-gradient(760px 420px at 66% -12%,rgba(59,130,246,.075),rgba(59,130,246,.03) 45%,transparent 78%);}
.tr-below .intel-head{position:relative;}
/* Sparkles are filled from a real SVG <linearGradient> (defined once in the
   section markup) so the iridescence is continuous across each star rather than
   a flat two-tone fake. */
.tr-below .intel-mark{display:inline-flex;filter:drop-shadow(0 4px 12px rgba(168,85,247,.28));}
/* background-clip:text clips to the LINE BOX, and .tr-below h2 sets a tight
   line-height:1.06 — which sliced the descender off the "g". inline-block plus a
   roomier line-height and bottom padding gives the paint box room; the negative
   margin cancels the extra height so surrounding layout is unchanged.
   The ramp is mirrored (i1-i2-i3-i2-i1) so that at 200% background-size any
   visible window shows a full iridescent sweep and the shimmer loops seamlessly
   — a plain 3-stop ramp only ever showed pink->violet, never the blue. */
.tr-below .intel-accent{display:inline-block;line-height:1.22;
  padding-bottom:.1em;margin-bottom:-.1em;
  background:linear-gradient(96deg,var(--i1) 0%,var(--i2) 25%,var(--i3) 50%,var(--i2) 75%,var(--i1) 100%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:intelshimmer 9s ease-in-out infinite;}
@keyframes intelshimmer{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
/* Hairline-divided panel (gap:1px over a line-coloured bed) — same as pricing. */
.tr-below .intel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line-2);border:1px solid var(--line-2);border-radius:18px;overflow:hidden;
  max-width:1080px;margin:clamp(34px,4.5vw,52px) auto 0;
  box-shadow:0 1px 3px rgba(20,24,14,.03),0 30px 60px -40px rgba(139,92,246,.28);}
.tr-below .intel-tile{background:var(--card);padding:28px 26px 24px;display:flex;flex-direction:column;
  transition:background .28s ease;}
.tr-below .intel-tile:hover{background:#FDFCFF;}
.tr-below .intel-tile__icon{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:16px;color:var(--i2);
  background:linear-gradient(150deg,rgba(236,72,153,.10),rgba(168,85,247,.10) 50%,rgba(59,130,246,.10));
  border:1px solid rgba(139,92,246,.22);
  box-shadow:0 1px 2px rgba(20,24,14,.04),0 10px 22px -16px rgba(139,92,246,.5);
  transition:transform .3s var(--ease),box-shadow .3s ease,border-color .3s ease;}
.tr-below .intel-tile:hover .intel-tile__icon{transform:translateY(-2px);border-color:rgba(139,92,246,.45);
  box-shadow:0 1px 2px rgba(20,24,14,.04),0 16px 30px -14px rgba(139,92,246,.55);}
.tr-below .intel-tile__spark{position:absolute;top:-5px;right:-5px;filter:drop-shadow(0 2px 5px rgba(168,85,247,.35));}
.tr-below .intel-tile__title{font-family:var(--serif);font-size:1.14rem;font-weight:600;letter-spacing:-.012em;
  color:var(--ink);margin:18px 0 0;}
.tr-below .intel-tile__desc{font-size:.95rem;line-height:1.55;color:var(--muted);margin:7px 0 0;flex:1 0 auto;}




.tr-below .intel-foot{text-align:center;margin:clamp(28px,3.5vw,40px) 0 0;}
/* Muted slate-violet (#574C7A). Near-black --ink read as foreign inside the
   iridescent band; a full-strength #7C3AED read as too bright for body-size
   link text. This is desaturated enough to stay quiet while still clearly
   violet-cast, and it is a strong 7.5:1 on paper. Hover steps up to the
   saturated violet rather than all the way to the bright ramp colour. */
.tr-below .intel-foot a{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:650;font-size:.98rem;color:var(--i-ink);}
.tr-below .intel-foot a:hover{color:#7C3AED;}
.tr-below .intel-foot a span{transition:transform .2s var(--ease);}
.tr-below .intel-foot a:hover span{transform:translateX(3px);}
@media(max-width:900px){.tr-below .intel-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.tr-below .intel-grid{grid-template-columns:1fr;max-width:440px;}}
@media(prefers-reduced-motion:reduce){.tr-below .intel-accent{animation:none;}}
/* ---------------- Reviews ---------------- */.tr-below .rev-sec{overflow:hidden;}.tr-below .rev-row{margin-top:clamp(48px,6vw,84px);overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}.tr-below .rev-tr{display:flex;width:max-content;gap:22px;padding:20px 0 56px;animation:revscroll 78s linear infinite;}@keyframes revscroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}.tr-below .rev-card{width:378px;flex:none;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 28px;box-shadow:0 1px 3px rgba(20,24,14,.03),0 22px 48px -30px rgba(20,24,14,.13);transition:transform .3s var(--ease),box-shadow .3s;}/* Hover shadow is tuned to hug the 18px corners (small negative spreads) and to
   fit inside .rev-row's overflow:hidden box — .rev-tr carries the bottom padding
   that gives it room. A large -34px spread (var(--sh2)) rendered as a hard
   straight band because it was both narrower than the card and clipped flat. */
.tr-below .rev-card:hover{transform:translateY(-6px);box-shadow:0 2px 6px rgba(20,24,14,.05),0 16px 28px -10px rgba(20,24,14,.13),0 32px 52px -28px rgba(20,24,14,.16);}.tr-below .rev-stars{display:inline-flex;gap:2px;color:var(--green);}.tr-below .rev-q{font-family:var(--serif);font-size:1.12rem;line-height:1.42;color:var(--ink);margin:13px 0 18px;font-weight:500;}.tr-below .rev-by{display:flex;align-items:center;gap:12px;margin-top:auto;}.tr-below .rev-av{width:40px;height:40px;border-radius:50%;background:var(--tint);color:var(--green-ink);display:grid;place-items:center;font-family:var(--serif);font-weight:800;flex:none;}
img.rev-av{object-fit:cover;border:1px solid var(--line);}.tr-below .rev-n{font-weight:700;font-size:14px;line-height:1.3;display:block;}.tr-below .rev-r{font-size:12.5px;line-height:1.3;color:var(--muted);display:block;margin-top:2px;}.tr-below .rev-badge{margin-left:auto;display:inline-flex;align-items:center;line-height:0;flex:none;}.tr-below .rev-badge svg,.tr-below .rev-badge img{display:block;}@media(prefers-reduced-motion:reduce){.tr-below .mq-tr,.tr-below .rev-tr,.tr-below .ilogo{animation:none;}}.tr-below .note{text-align:center;padding:40px 24px 60px;color:var(--faint);font-size:12.5px;line-height:1.6;max-width:680px;margin-inline:auto;}.tr-below .note b{color:var(--muted);}

/* ===== Rebuilt product mockups (from real dashboard screenshots) =====
   Authored as a fixed 1280x816 DOM canvas and CSS-scaled by .real-mock-inner, so
   they stay sharp at any width. Palette sampled from the live app:
   brand #6BBC05 / UI #6DB422 / action #66B03A / approvals #4267B1 / amber #C7861F.
   Every selector is double-scoped under `.tr-below .trm`.
   NOTE: the root is `.trm`, NOT `.ss` — `.ss` is already taken by `.subs .ss`
   (the sub-item description span), and reusing it made every one of those spans
   inherit the 1280x816 canvas box — these class names
   (.field, .chip, .pipe, .up ...) are generic and would otherwise collide with
   Elementor and the parent theme. Do not un-scope them. ===== */
/* ================= SHARED APP MOCKUP SYSTEM ================= */
.tr-below .trm{width:1280px;height:860px;display:flex;flex-direction:column;--g:#6DB422;--gb:#66B03A;--gd:#4D9037;--tint:#EBF4E5;--tint2:#DCEBC6;
    --blue:#4267B1;--blue-t:#D6DEEE;--navy:#16233A;--amber:#C7861F;--amber-t:#FBEFDC;
    --paper:#fff;--sunk:#F8F8F8;--zebra:#F6F6F6;--line:#E7E7E7;--line2:#F0F0F0;
    --ink:#1D1D1D;--muted:#6B6B6B;--faint:#9C9C9C;--weekend:#F2FCFB;
    overflow:hidden;background:#fff;
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--ink);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.4}
.tr-below .trm *{box-sizing:border-box}
/* These frames are role="img" screenshots, not UI. pointer-events:none stops the
   theme's inherited table/row :hover styles from firing and makes them inert. */
.tr-below .trm,.tr-below .trm *{pointer-events:none;user-select:none;cursor:default}
/* Browser chrome — reads as a real window rather than a floating UI slab. */
.tr-below .trm-chrome{flex:0 0 44px;display:flex;align-items:center;gap:8px;padding:0 18px;
  background:#F4F4F1;border-bottom:1px solid #E4E4E0}
.tr-below .trm-chrome span{width:11px;height:11px;border-radius:50%;background:#D2D2CC}
/* The app area. Positioned, so the wedge scrim/modal anchor to the whole app
   (sidebar included) instead of hardcoding a -202px sidebar offset. */
.tr-below .trm-app{flex:1;display:flex;min-height:0;position:relative}
.tr-below .trm /* ---- sidebar ---- */
.ss-side{flex:0 0 202px;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:20px 0 14px;background:#fff}
.tr-below .ss-logo{display:flex;flex-direction:column;align-items:center;gap:9px;padding:0 18px 18px}
.tr-below .ss-logo .lg-t{width:40px;height:40px;display:block}
.tr-below .ss-logo .lg-w{width:158px;height:22.8px;display:block}
.tr-below .ss-sec{font:700 9.5px/1 Inter,sans-serif;letter-spacing:.11em;color:#A8A8A2;padding:12px 18px 7px;text-transform:uppercase}
.tr-below .ss-nav{display:flex;align-items:center;gap:11px;padding:7px 18px;color:#6E6E68;font-size:13px;font-weight:500;white-space:nowrap}
.tr-below .ss-nav svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tr-below .ss-nav.on{color:var(--ink);font-weight:700}
.tr-below .ss-nav.on svg{color:var(--g)}
.tr-below .ss-nav .badge{margin-left:auto;background:var(--amber-t);color:#9A6510;font:700 10px/1 Inter,sans-serif;padding:3.5px 6.5px;border-radius:999px}
.tr-below .ss-help{margin:14px 18px 0;background:var(--navy);color:#fff;border-radius:8px;padding:9px 0;text-align:center;
  font:700 12px/1 Inter,sans-serif;letter-spacing:.02em;display:flex;align-items:center;justify-content:center;gap:6px}
.tr-below .ss-help svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
.tr-below .ss-user{margin-top:auto;display:flex;align-items:center;gap:10px;padding:14px 0 0;
  border-top:1px solid var(--line2);margin-left:18px;margin-right:18px}
.tr-below .ss-user .av{width:32px;height:32px;border-radius:50%;background:var(--navy);border:2px solid var(--g);
  display:grid;place-items:center;flex:none;font:700 13px/1 Inter,sans-serif;color:#fff;letter-spacing:.01em}
.tr-below .ss-user .nm{font:700 12.5px/1.25 Inter,sans-serif}
.tr-below .ss-user .rl{font-size:10px;color:var(--faint);margin-top:2px;white-space:nowrap}
.tr-below .trm /* ---- main + topbar ---- */
.ss-main{flex:1;display:flex;flex-direction:column;min-width:0}
.tr-below .ss-top{flex:0 0 62px;display:flex;align-items:center;gap:14px;padding:0 22px;border-bottom:1px solid var(--line)}
.tr-below .ss-title{font:700 19px/1 Inter,sans-serif;letter-spacing:-.02em}
.tr-below .ss-seg{display:flex;background:var(--sunk);border-radius:7px;padding:3px}
.tr-below .ss-seg span{padding:6px 20px;font:600 12.5px/1 Inter,sans-serif;color:var(--muted);border-radius:5px}
.tr-below .ss-seg span.on{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.09)}
.tr-below .ss-date{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:8px;padding:7px 12px;font:600 12.5px/1 Inter,sans-serif}
.tr-below .ss-date svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:1.7;stroke-linecap:round}
.tr-below .ss-btn{background:var(--gb);color:#fff;border-radius:7px;padding:9px 20px;font:700 13px/1 Inter,sans-serif}
.tr-below .ss-ico{width:32px;height:32px;border-radius:7px;display:grid;place-items:center;color:var(--muted)}
.tr-below .ss-ico svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tr-below .ss-period{background:var(--sunk);border-radius:8px;padding:8px 16px;text-align:center;margin-left:auto}
.tr-below .ss-period .l{font-size:10.5px;color:var(--faint);font-weight:500}
.tr-below .ss-period .v{font:800 15px/1 Inter,sans-serif;margin-top:3px;font-variant-numeric:tabular-nums}
.tr-below .trm /* ---- timesheet grid ---- */
.ss-body{flex:1;padding:20px 26px 0;min-height:0;overflow:hidden}
.tr-below .trm .tsheet{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
/* The parent theme paints bare th/td (grey header fill, borders, vertical-align:top),
   which boxed the Customer/Task headers and top-anchored their cell text. */
.tr-below .trm .tsheet th{background:transparent;border:0}
.tr-below .trm .tsheet td{vertical-align:middle}
.tr-below .trm .tsheet th{font:700 9.5px/1 Inter,sans-serif;letter-spacing:.08em;color:var(--faint);
  text-transform:uppercase;padding:0 0 11px;text-align:center;vertical-align:bottom}
/* 13px = the td's 12px padding + its 1px border, so the header sits exactly
   over the cell text below it. */
.tr-below .trm .tsheet th.l{text-align:left;padding-left:13px}
.tr-below .trm .tsheet th .d{display:block;font-size:13px;letter-spacing:-.01em;color:var(--ink);font-weight:700;margin-bottom:3px}
.tr-below .trm .tsheet td{border:1px solid var(--line);height:64px;text-align:center;font-size:13.5px;font-weight:600}
.tr-below .trm .tsheet td.sel{background:#fff}
.tr-below .trm .tsheet td.we{background:var(--weekend)}
.tr-below .trm .tsheet td.tot{font-weight:800;background:var(--sunk)}
.tr-below .trm .tsheet td.pick{text-align:left;padding:0 12px;font-weight:600}
.tr-below .trm .tsheet td.pick.ph{color:#B6B6B6;font-weight:500}
.tr-below .trm .tsheet .cell{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tr-below .trm .tsheet .cell svg{width:14px;height:14px;stroke:#9C9C9C;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tr-below .trm .tsheet td.lab{border:0;text-align:right;padding-right:16px;font:700 10px/1 Inter,sans-serif;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.tr-below .trm .tsheet tr.sumrow td{border-top:2px solid #D8D8D8;font-weight:800;background:var(--sunk)}
.tr-below .ss-show{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:34px;font:600 13.5px/1 Inter,sans-serif;color:var(--ink)}
.tr-below .ss-show svg{width:13px;height:13px;fill:var(--ink)}
.tr-below .trm /* ================= REPORTING DASHBOARD ================= */
.rp{flex:1;display:flex;flex-direction:column;min-width:0;background:#FBFBF8}
.tr-below .trm .rp-head{padding:18px 26px 0;display:flex;align-items:flex-start;gap:16px}
.tr-below .trm .rp-eyebrow{font:700 9.5px/1 Inter,sans-serif;letter-spacing:.12em;color:#A8A8A2;text-transform:uppercase}
.tr-below .trm .rp-hi{font:800 24px/1.1 Inter,sans-serif;letter-spacing:-.03em;margin-top:8px}
.tr-below .trm .rp-sum{font-size:12.5px;color:var(--muted);margin-top:7px}
.tr-below .trm .rp-sum b{color:var(--ink);font-weight:700}
.tr-below .trm .rp-actions{margin-left:auto;display:flex;align-items:center;gap:9px}
.tr-below .trm .rp-chips{display:flex;align-items:center;gap:8px;padding:16px 26px 0}
.tr-below .trm .rp-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:6.5px 13px;font:600 11.5px/1 Inter,sans-serif;color:var(--muted)}
.tr-below .trm .rp-chip svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tr-below .trm .rp-chip.date{font-weight:700;color:var(--ink);border-radius:8px}
.tr-below .trm .rp-live{margin-left:auto;display:flex;align-items:center;gap:8px;font:600 11.5px/1 Inter,sans-serif;color:var(--muted)}
.tr-below .trm .rp-live .sw{width:30px;height:17px;border-radius:999px;background:#DCDCD6;position:relative}
.tr-below .trm .rp-live .sw::after{content:"";position:absolute;top:2.5px;left:2.5px;width:12px;height:12px;border-radius:50%;background:#fff}
.tr-below .trm .rp-grid{padding:13px 26px 18px;display:flex;flex-direction:column;gap:12px;flex:1;min-height:0}
.tr-below .trm .rp-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tr-below .trm .rp-kpi{background:#fff;border:1px solid var(--line);border-radius:11px;padding:13px 15px 0;overflow:hidden;position:relative}
.tr-below .trm .rp-kpi .kt{display:flex;align-items:center;justify-content:space-between}
.tr-below .trm .rp-kpi .kl{font:600 11.5px/1 Inter,sans-serif;color:var(--muted)}
.tr-below .trm .rp-kpi .ki{width:23px;height:23px;border-radius:6px;background:var(--tint);display:grid;place-items:center}
.tr-below .trm .rp-kpi .ki svg{width:12px;height:12px;stroke:var(--gd);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tr-below .trm .rp-kpi.warn .ki{background:var(--amber-t)}
.tr-below .trm .rp-kpi.warn .ki svg{stroke:#9A6510}
.tr-below .trm .rp-kpi .kv{font:800 27px/1 Inter,sans-serif;letter-spacing:-.035em;margin-top:9px;font-variant-numeric:tabular-nums}
.tr-below .trm .rp-kpi .kv s{text-decoration:none;font-size:15px;font-weight:700;color:var(--faint);margin-left:1px}
.tr-below .trm .rp-kpi .kd{font-size:10.5px;color:var(--muted);margin-top:6px;display:flex;align-items:center;gap:5px}
.tr-below .trm .rp-kpi .kd b{color:var(--gd);font-weight:700}
.tr-below .trm .rp-kpi .kd b.a{color:#9A6510}
.tr-below .trm .rp-kpi .spark{margin:7px -15px 0;display:block;width:calc(100% + 30px)}
.tr-below .trm .rp-pill{display:inline-block;background:var(--amber-t);color:#9A6510;font:700 10px/1 Inter,sans-serif;padding:4px 8px;border-radius:999px}
.tr-below .trm .rp-two{display:grid;grid-template-columns:1.55fr 1fr;gap:12px;flex:1;min-height:0}
.tr-below .trm .rp-card{background:#fff;border:1px solid var(--line);border-radius:11px;padding:15px 17px;display:flex;flex-direction:column;min-height:0}
.tr-below .trm .rp-ch{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.tr-below .trm .rp-ct{font:700 14px/1 Inter,sans-serif;letter-spacing:-.015em}
.tr-below .trm .rp-cs{font-size:11px;color:var(--muted);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-below .trm .rp-leg{display:flex;gap:13px;font-size:10.5px;color:var(--muted);font-weight:600}
.tr-below .trm .rp-leg i{display:inline-block;width:9px;height:9px;border-radius:2.5px;margin-right:5px;vertical-align:-1px}
.tr-below .trm /* bar chart */
.bars{flex:1;display:flex;align-items:flex-end;gap:14px;margin-top:14px;padding-left:34px;position:relative;min-height:0}
.tr-below .trm .bars .ax{position:absolute;left:0;top:0;bottom:19px;width:30px;display:flex;flex-direction:column;justify-content:space-between;
  font-size:9.5px;color:var(--faint);text-align:right;font-weight:600}
.tr-below .trm .bars .grid{position:absolute;left:34px;right:0;top:0;bottom:19px;display:flex;flex-direction:column;justify-content:space-between}
.tr-below .trm .bars .grid i{height:1px;background:var(--line2)}
.tr-below .trm .bars .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;position:relative;z-index:1}
.tr-below .trm .bars .stack{width:100%;display:flex;flex-direction:column;justify-content:flex-end;flex:1}
.tr-below .trm .bars .nb{background:#C6CEB8;border-radius:4px 4px 0 0}
.tr-below .trm .bars .b{background:var(--g)}
.tr-below .trm .bars .col.wk .b{background:#AFD183}
.tr-below .trm .bars .lb{font-size:11px;color:var(--muted);font-weight:600;margin-top:6px;height:13px}
.tr-below .trm /* gauge + team bars */
.gauge{display:flex;flex-direction:column;align-items:center;margin-top:2px;flex:none}
.tr-below .trm .gauge .v{font:800 22px/1 Inter,sans-serif;letter-spacing:-.03em;margin-top:-21px}
.tr-below .trm .gauge .v s{text-decoration:none;font-size:14px;color:var(--faint)}
.tr-below .trm .gauge .t{font-size:10px;color:var(--muted);margin-top:4px}
.tr-below .trm .gauge .t b{color:var(--gd);font-weight:700}
.tr-below .trm .teams{margin-top:10px;display:flex;flex-direction:column;gap:7px;flex:1;justify-content:space-evenly;min-height:0}
.tr-below .trm .team{display:flex;align-items:center;gap:9px;font-size:11px}
.tr-below .trm .team .n{flex:0 0 68px;color:var(--muted);font-weight:600}
.tr-below .trm .team .tr{flex:1;height:7px;border-radius:999px;background:#EDEDE7;position:relative;overflow:hidden}
.tr-below .trm .team .tr i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--g)}
.tr-below .trm .team.under .tr i{background:var(--amber)}
.tr-below .trm .team .tr u{position:absolute;top:-2px;bottom:-2px;width:1.5px;background:#B9B9B2}
.tr-below .trm .team .p{flex:0 0 30px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.tr-below .trm /* bottom row */
.rp-bot{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:0 0 192px}
.tr-below .trm .burn{display:flex;flex-direction:column;gap:11px;margin-top:12px;flex:1;justify-content:center}
.tr-below .trm .burn .r .t{display:flex;align-items:baseline;justify-content:space-between;font-size:11.5px}
.tr-below .trm .burn .r .t b{font-weight:700}
.tr-below .trm .burn .r .t s{text-decoration:none;color:var(--faint);font-weight:500;font-size:10.5px;margin-left:5px}
.tr-below .trm .burn .r .t em{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums;font-size:12px}
.tr-below .trm .burn .r .t em u{text-decoration:none;color:var(--faint);font-weight:500}
.tr-below .trm .burn .r .bar{height:7px;border-radius:999px;background:#EDEDE7;margin-top:6px;overflow:hidden}
.tr-below .trm .burn .r .bar i{display:block;height:100%;border-radius:999px;background:var(--g)}
.tr-below .trm .burn .r.over .bar i{background:var(--amber)}
.tr-below .trm .burn .r .m{font-size:10px;color:var(--muted);margin-top:5px;display:flex;align-items:center;gap:7px}
.tr-below .trm .st{display:inline-block;font:700 9.5px/1 Inter,sans-serif;padding:3.5px 7px;border-radius:999px;background:var(--tint);color:var(--gd)}
.tr-below .trm .st.a{background:var(--amber-t);color:#9A6510}
.tr-below .trm .q{margin-top:10px;display:flex;flex-direction:column}
.tr-below .trm .q .qh{display:grid;grid-template-columns:1fr 46px 62px 62px;gap:6px;font:700 9px/1 Inter,sans-serif;letter-spacing:.08em;
  color:var(--faint);text-transform:uppercase;padding-bottom:8px;border-bottom:1px solid var(--line2)}
.tr-below .trm .q .qr{display:grid;grid-template-columns:1fr 46px 62px 62px;gap:6px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line2);font-size:11px}
.tr-below .trm .q .qr:last-child{border-bottom:0}
.tr-below .trm .q .who{display:flex;align-items:center;gap:8px;min-width:0}
.tr-below .trm .q .who .av{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 9px/1 Inter,sans-serif;color:#fff;flex:none}
.tr-below .trm .q .who .nm{font-weight:700;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-below .trm .q .who .rl{font-size:9.5px;color:var(--faint);margin-top:1px}
.tr-below .trm .q .num{font-weight:700;font-variant-numeric:tabular-nums}
.tr-below .trm .q .per{color:var(--muted);font-variant-numeric:tabular-nums}
.tr-below .trm .rp-link{font:700 11px/1 Inter,sans-serif;color:var(--gd);white-space:nowrap;flex:none;padding-top:2px}
.tr-below .trm /* ============ shared additions ============ */
.ss-main{position:relative}
.tr-below .trm .ri{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tr-below .ss-top.dim{opacity:.85}
.tr-below .trm .tmuted{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.tr-below .trm .tmuted b{color:var(--ink);font-weight:600}
.tr-below .trm .tright{margin-left:auto;display:flex;align-items:center;gap:10px}
.tr-below .trm .tbtn{display:inline-flex;align-items:center;gap:6px;background:var(--sunk);border:1px solid var(--line);
  border-radius:7px;padding:8px 15px;font:600 12.5px/1 Inter,sans-serif;color:#3A3A38;white-space:nowrap}
.tr-below .trm .tbtn.sm{padding:6px 11px;font-size:11.5px}
.tr-below .trm .tbtn.gh{background:#fff;color:var(--gd);border-color:#CDE3B9}
.tr-below .trm .srch{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:8px;
  padding:9px 14px;font-size:12.5px;color:#A6A6A0;min-width:230px}
.tr-below .trm .srch.wide{min-width:290px}
.tr-below .trm .srch svg{width:15px;height:15px;stroke:#A6A6A0;fill:none;stroke-width:1.8;stroke-linecap:round}
.tr-below .trm .cbx{width:16px;height:16px;border:1.6px solid #C4C4BE;border-radius:3.5px;flex:none;display:block}
.tr-below .trm .cbx.on{background:var(--gb);border-color:var(--gb);position:relative}
.tr-below .trm .cbx.on::after{content:"";position:absolute;left:4.6px;top:1.4px;width:4px;height:8px;border:solid #fff;
  border-width:0 2px 2px 0;transform:rotate(42deg)}
.tr-below .trm .cbx.half{background:var(--gb);border-color:var(--gb);position:relative}
.tr-below .trm .cbx.half::after{content:"";position:absolute;left:3px;top:6.2px;width:8px;height:2px;background:#fff}
.tr-below .trm .tlab{font-size:12.5px;font-weight:600}
.tr-below .ss-ico.act{background:var(--sunk);color:var(--ink)}
.tr-below .ss-body2{flex:1;padding:0 26px 18px;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.tr-below .trm /* ============ status pipeline (approvals + wedge) ============ */
.pipe{flex:0 0 76px;display:flex;background:var(--line);overflow:hidden}
.tr-below .trm /* Long,
.tr-below .trm shallow arrow (40px point on a 76px bar) — matches the app. A short point
   reads as a stubby spike rather than a breadcrumb. */
.pipe .pst{flex:1;display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff;
  padding:0 44px 0 64px;margin-left:-39px;
  clip-path:polygon(0 0,calc(100% - 40px) 0,100% 50%,calc(100% - 40px) 100%,0 100%,40px 50%)}
.tr-below .trm .pipe .pst.first{margin-left:0;padding-left:28px;clip-path:polygon(0 0,calc(100% - 40px) 0,100% 50%,calc(100% - 40px) 100%,0 100%)}
.tr-below .trm .pipe .pst:last-child{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,40px 50%)}
.tr-below .trm .pipe .sl{font:700 14px/1 Inter,sans-serif;letter-spacing:-.01em}
.tr-below .trm .pipe .sh{font-size:12px;color:var(--muted);margin-top:7px}
.tr-below .trm .pipe .sc{min-width:34px;height:26px;padding:0 10px;border-radius:999px;background:var(--blue-t);color:var(--blue);
  display:grid;place-items:center;font:700 12.5px/1 Inter,sans-serif;flex:none}
.tr-below .trm .pipe .pst.on{background:var(--blue);color:#fff}
.tr-below .trm .pipe.navy .pst.on{background:var(--navy)}
.tr-below .trm .pipe .pst.on .sh{color:rgba(255,255,255,.78)}
.tr-below .trm .pipe .pst.on .sc{background:#fff;color:var(--blue)}
.tr-below .trm .pipe.navy .pst.on .sc{background:#fff;color:var(--navy)}
.tr-below .trm .pipe .pst.done .sc{background:var(--gd);color:#fff}
.tr-below .trm /* ============ toolbars ============ */
.tbar{flex:0 0 62px;display:flex;align-items:center;gap:16px;padding:0 26px;border-bottom:1px solid var(--line2)}
.tr-below .trm .tbar2{flex:0 0 62px;display:flex;align-items:center;gap:11px;padding:0 26px}
.tr-below .trm .tbar2 .srch{margin-left:auto}
.tr-below .trm /* ============ approvals table ============ */
.atbl{display:flex;flex-direction:column}
.tr-below .trm .ah,
.tr-below .trm .ar{display:grid;grid-template-columns:34px 1fr 56px 130px 156px;align-items:center;gap:10px}
.tr-below .trm .ah{font:700 9.5px/1 Inter,sans-serif;letter-spacing:.08em;color:var(--faint);text-transform:uppercase;padding:0 16px 12px}
.tr-below .trm .ah span:nth-child(4),
.tr-below .trm .ah span:nth-child(5){text-align:right}
.tr-below .trm .ar{height:66px;padding:0 16px;border:1px solid var(--line);border-radius:9px;margin-bottom:8px;background:#fff}
.tr-below .trm .ar.z{background:var(--zebra)}
.tr-below .trm .anm{display:flex;align-items:center;gap:12px;font:700 14px/1 Inter,sans-serif}
.tr-below .trm .anm svg{width:14px;height:14px;stroke:#8C8C86;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tr-below .trm .apr svg{width:17px;height:17px;stroke:#8C8C86;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tr-below .trm .anum{text-align:right;font:700 14px/1 Inter,sans-serif;font-variant-numeric:tabular-nums}
.tr-below .trm /* ============ budgeting ============ */
.bsplit{flex:1;display:flex;min-height:0}
.tr-below .trm .clist{flex:0 0 236px;border-right:1px solid var(--line);padding:16px 0;overflow:hidden}
.tr-below .trm .ci{padding:10.5px 24px;font-size:13px;color:#5E5E58;border-bottom:1px solid var(--line2)}
.tr-below .trm .ci.on{font-weight:800;color:var(--ink)}
.tr-below .trm .bmain{flex:1;display:flex;flex-direction:column;min-width:0;padding:14px 24px 0}
.tr-below .trm .btabs{display:flex;align-items:center;gap:2px;background:var(--sunk);border-radius:9px;padding:4px;font-size:12.5px}
.tr-below .trm .btabs span{padding:8px 15px;border-radius:6px;color:var(--muted);font-weight:600;white-space:nowrap}
.tr-below .trm .btabs span.on{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.tr-below .trm .btabs .bx{margin-left:auto;color:#9C9C96;font-size:15px;padding:6px 10px}
.tr-below .trm .brow2{display:flex;align-items:center;margin-top:16px}
.tr-below .trm .chip{border:1px solid var(--line);border-radius:7px;padding:9px 26px;font:700 12.5px/1 Inter,sans-serif}
.tr-below .trm .brow3{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:12px}
.tr-below .trm .brow3 .ri{width:13px;height:13px}
.tr-below .trm .btbl{margin-top:12px;flex:1;min-height:0;overflow:hidden}
.tr-below .trm .btr{display:grid;grid-template-columns:74px 132px 1fr 66px 96px 84px 96px 126px;align-items:center;gap:12px;
  height:52px;border-bottom:1px solid var(--line2);font-size:12.5px}
.tr-below .trm .btr.th{height:38px;font:700 9.5px/1 Inter,sans-serif;letter-spacing:.08em;color:var(--faint);
  text-transform:uppercase;border-bottom:1px solid var(--line)}
.tr-below .trm .btr.head{font-weight:800;background:var(--sunk)}
.tr-below .trm .bnm{font-weight:700;padding-left:10px}
.tr-below .trm .bsub{color:var(--muted);font-size:12px}
.tr-below .trm .bbar{height:9px;border-radius:999px;background:#EDEDE7;position:relative;overflow:hidden}
.tr-below .trm .bfill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--g)}
.tr-below .trm .bfill.over{background:var(--amber)}
.tr-below .trm .bpct{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.tr-below .trm .bnum{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.tr-below .trm .btr.th .bnum,
.tr-below .trm .btr.th .bact{font-weight:700}
.tr-below .trm .bact{display:flex;justify-content:flex-end;padding-right:10px}
.tr-below .trm .bsel{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:7px;
  padding:7px 11px;font:600 11.5px/1 Inter,sans-serif;color:var(--muted)}
.tr-below .trm .bsel svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tr-below .trm /* ============ outlined field (invoicing + expenses) ============ */
.field{position:relative;border:1px solid #CFCFC9;border-radius:7px;height:58px;display:flex;align-items:center;
  padding:0 14px;gap:10px;background:#fff;flex:none;min-width:0}
.tr-below .trm .frow .field{flex:1}
.tr-below .trm .flab{position:absolute;top:-7px;left:11px;background:#fff;padding:0 5px;font-size:10.5px;color:#8A8A84;font-weight:500}
.tr-below .trm .fval{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-below .trm .field svg{width:15px;height:15px;stroke:#8A8A84;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  margin-left:auto;flex:none}
.tr-below .trm .field.ta{height:158px;align-items:flex-start;padding-top:16px}
.tr-below .trm .field.row .fval{font-weight:500;color:#3A3A38}
.tr-below .trm .frow{display:flex;gap:18px;margin-top:18px}
.tr-below .trm .frow.half{display:flex;gap:18px;margin-top:14px;width:64%}
.tr-below .trm /* ============ invoicing ============ */
.ss-main.inv .ss-top{gap:12px}
.tr-below .trm .att .ri{width:13px;height:13px}
.tr-below .trm .billto{display:flex;align-items:center;gap:16px;margin-top:18px;font-size:14.5px}
.tr-below .trm .billto b{font-weight:800}
.tr-below .trm .lnk{color:var(--gd);font:700 12px/1 Inter,sans-serif}
.tr-below .trm .tlist{display:flex;align-items:center;gap:16px;margin-top:18px;font-size:15px}
.tr-below .trm .tlist b{font-weight:800}
.tr-below .trm .itbl{margin-top:12px;min-height:0;overflow:hidden}
.tr-below .trm .itr{display:grid;grid-template-columns:150px 1fr 1fr 90px 100px 110px 58px;align-items:center;gap:10px;
  height:40px;border-bottom:1px solid var(--line2);font-size:12.5px;font-weight:600}
.tr-below .trm .itr.th{height:38px;background:var(--sunk);border-radius:6px;font:700 9.5px/1 Inter,sans-serif;
  letter-spacing:.08em;color:var(--faint);text-transform:uppercase;padding:0 12px;border-bottom:0}
.tr-below .trm .itr:not(.th){padding:0 12px}
.tr-below .trm .itr .r{text-align:right;font-variant-numeric:tabular-nums}
.tr-below .trm .ied{display:flex;gap:9px;justify-content:flex-end;color:#B4B4AE}
/* Invoice identity: status badge, billed-to party and a real totals block, so
   the frame reads as an invoice rather than a generic form. */
.tr-below .trm .ibadge{display:inline-flex;align-items:center;font:700 10px/1 Inter,sans-serif;
  letter-spacing:.07em;text-transform:uppercase;padding:5px 9px;border-radius:5px;
  background:var(--amber-t);color:#9A6510}
.tr-below .trm .billto-v{margin-top:7px;font-size:13.5px;font-weight:700}
.tr-below .trm .billto-v span{display:block;font-weight:500;font-size:11.5px;color:var(--muted);margin-top:3px}
.tr-below .trm .inv-tot{margin:16px 0 0 auto;width:296px;display:flex;flex-direction:column;gap:9px}
.tr-below .trm .inv-tot .tr{display:flex;justify-content:space-between;align-items:baseline;
  font-size:12.5px;color:var(--muted)}
.tr-below .trm .inv-tot .tr b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.tr-below .trm .inv-tot .tr.big{border-top:1px solid var(--line);padding-top:12px;margin-top:2px;color:var(--ink)}
.tr-below .trm .inv-tot .tr.big span{font-weight:700;font-size:13.5px}
.tr-below .trm .inv-tot .tr.big b{font-size:22px;font-weight:800;letter-spacing:-.025em}
.tr-below .trm /* ============ expenses ============ */
.expbg{flex:1;display:flex;min-height:0;opacity:.9}
.tr-below .trm .explist{flex:0 0 232px;border-right:1px solid var(--line);padding:16px 0}
.tr-below .trm .eh{font:800 14px/1 Inter,sans-serif;padding:0 22px 16px}
.tr-below .trm .ei{display:flex;justify-content:space-between;padding:14px 22px;background:var(--sunk);font-size:13.5px;font-weight:600}
.tr-below .trm .exdet{flex:1;padding:16px 24px}
.tr-below .trm .eh2{font:800 20px/1 Inter,sans-serif;letter-spacing:-.02em}
.tr-below .trm .erow{display:flex;align-items:center;gap:12px;margin-top:18px;font-size:12.5px;color:var(--muted)}
.tr-below .trm .erow b{color:var(--ink)}
.tr-below .trm .ecols{display:grid;grid-template-columns:180px 1fr;gap:10px;margin-top:22px;padding-bottom:12px;
  border-bottom:1px solid var(--line);font:700 9.5px/1 Inter,sans-serif;letter-spacing:.08em;
  color:var(--faint);text-transform:uppercase}
.tr-below .trm .ecols.v{border-bottom:0;font:600 13px/1 Inter,sans-serif;letter-spacing:0;color:var(--ink);text-transform:none;margin-top:18px}
.tr-below .trm .drawer{position:absolute;top:0;right:0;bottom:0;width:706px;background:#fff;z-index:6;
  box-shadow:-30px 0 70px -30px rgba(0,0,0,.30);padding:26px 34px 0;display:flex;flex-direction:column}
.tr-below .trm .dx{position:absolute;left:-22px;top:44px;width:44px;height:44px;border-radius:50%;background:#fff;
  display:grid;place-items:center;color:#5E5E58;font-size:16px;box-shadow:0 3px 12px rgba(0,0,0,.14)}
.tr-below .trm .dtitle{font:800 22px/1 Inter,sans-serif;letter-spacing:-.025em}
.tr-below .trm .dlab{font-size:11px;color:var(--muted);margin-top:24px}
.tr-below .trm .dicons{display:flex;gap:9px;margin-top:11px}
.tr-below .trm .di{width:44px;height:40px;border:1px solid var(--line);border-radius:7px;display:grid;place-items:center}
.tr-below .trm .di svg{width:18px;height:18px;stroke:#3A3A38;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tr-below .trm .di.g svg{stroke:#8A8A84}
.tr-below .trm .dgrid{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px;margin-top:34px}
.tr-below .trm .dgrid>div{display:flex;flex-direction:column;gap:26px}
.tr-below .trm .tog{width:42px;height:23px;border-radius:999px;background:#DCDCD6;position:relative;margin-left:auto;flex:none}
.tr-below .trm .tog::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff}
.tr-below .trm .radios{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:500}
.tr-below .trm .rd{width:17px;height:17px;border:1.8px solid #C4C4BE;border-radius:50%;flex:none}
.tr-below .trm .rd.on{border-color:var(--gb);position:relative}
.tr-below .trm .rd.on::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--gb)}
.tr-below .trm .radios .rd:nth-of-type(2){margin-left:18px}
.tr-below .trm .upl{border:1px solid var(--line);border-radius:9px;padding:14px;display:flex;gap:14px}
.tr-below .trm .up{width:104px;height:118px;border:1.6px dashed #CFCFC9;border-radius:8px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;font-size:11.5px;color:var(--muted)}
.tr-below .trm .up .ri{width:20px;height:20px}
.tr-below .trm .pdf{width:104px;height:118px;border-radius:8px;background:var(--sunk);display:grid;place-items:center;position:relative}
.tr-below .trm .pdf .ri{width:34px;height:34px;stroke:#8A8A84}
.tr-below .trm .pt{position:absolute;top:9px;left:9px;background:#C43B2E;color:#fff;font:700 8px/1 Inter,sans-serif;
  padding:3px 4px;border-radius:2.5px}
/* Full-bleed expense form: the side-drawer left ~40% of the frame as dead white
   space, so on the marketing page the record itself fills the window. */
.tr-below .trm .drawer.full{position:static;width:auto;flex:1;box-shadow:none;padding:22px 40px 0}
.tr-below .trm .drawer.full .dx{display:none}
.tr-below .trm .drawer.full .dgrid{gap:30px 46px;margin-top:26px}
.tr-below .trm .drawer.full .field{height:66px}
.tr-below .trm .drawer.full .field.ta{height:186px}
.tr-below .trm .drawer.full .up,.tr-below .trm .drawer.full .pdf{width:118px;height:134px}
.tr-below .trm .drawer.full .dicons{gap:11px}
.tr-below .trm .drawer.full .di{width:50px;height:46px}
.tr-below .trm .dfoot{margin-top:auto;display:flex;align-items:center;gap:14px;padding:20px 0 22px;border-top:1px solid var(--line2)}
.tr-below .trm .dfoot .field{max-width:236px;height:52px}
.tr-below .trm .dfoot .tbtn.gh,
.tr-below .trm .dfoot .ss-btn{margin-left:0}
.tr-below .trm .dfoot .tbtn.gh{margin-left:auto}
.tr-below .trm .dfoot .ri{width:16px;height:16px}
.tr-below .trm /* ============ wedge: scrim + signature modal ============ */
.scrim{position:absolute;inset:0;background:rgba(28,30,24,.46);z-index:5}
.tr-below .trm .modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:530px;z-index:6;
  background:#fff;border-radius:14px;padding:28px 30px 22px;box-shadow:0 34px 80px -24px rgba(0,0,0,.45)}
.tr-below .trm .mt{font:800 21px/1 Inter,sans-serif;letter-spacing:-.025em;text-align:center}
.tr-below .ss-seg.big{margin-top:22px;padding:4px;border-radius:8px}
.tr-below .ss-seg.big span{flex:1;text-align:center;padding:10px 0;font-size:13.5px}
.tr-below .trm .sigbox{margin-top:16px;border:1px solid var(--line);border-radius:9px;height:196px;display:grid;place-items:center}
.tr-below .trm .sig{width:100%;height:100%;fill:none;stroke:#16161A;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.tr-below .trm .sigl{font-size:12px;color:var(--muted);margin-top:12px}
.tr-below .trm .mfoot{display:flex;align-items:center;margin-top:22px}
.tr-below .trm .mright{margin-left:auto;display:flex;align-items:center;gap:11px}

/* ============================================================================
   AUDIT WEDGE v2 — the page's single dark band.
   Every other section is light, so the one moment carrying the compliance claim
   read as just another pale block, and a white app screenshot on a pale-green
   wash was the lowest-contrast image on the page. Reuses the vocabulary approved
   for the integrations row: dot grid, hover lift, coloured glow.
   TYPOGRAPHY IS INHERITED ON PURPOSE — h2 keeps `.tr-below h2` (Besley 600,
   -.018em) and `.shead h2`'s clamp, .lead keeps `.tr-below .lead`. Only colour
   is overridden here, so the wedge title matches every other section heading.
   ========================================================================== */
.tr-below .wedge2{
  --w-line:rgba(255,255,255,.10);
  --w-line-hi:rgba(155,211,95,.42);
  --w-ink:#F2F5EE;
  --w-muted:rgba(242,245,238,.62);
  --w-green:#9BD35F;          /* lifted from #6DB422 for AA contrast on dark */
  --w-green-2:#7CB93C;
  position:relative;isolation:isolate;overflow:hidden;
  background:#131A12;         /* deep ink-green, not black — stays in the family */
  color:var(--w-ink);
}
/* Dot grid + a soft green bloom behind the frame. Same device as .integ. */
.tr-below .wedge2::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask:radial-gradient(120% 90% at 50% 30%,#000 35%,transparent 78%);
          mask:radial-gradient(120% 90% at 50% 30%,#000 35%,transparent 78%);
}
.tr-below .wedge2::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:50%;top:8%;width:min(1100px,92%);aspect-ratio:2/1;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(124,185,60,.20),transparent 70%);
  filter:blur(18px);
}
.tr-below .wedge2 > .wrap{position:relative;z-index:1;}

/* ---- title: colour only, so it stays identical to every other section ---- */
.tr-below .wedge2 h2{color:var(--w-ink);}
.tr-below .wedge2 h2 em{font-style:normal;color:var(--w-green);position:relative;white-space:nowrap;}
/* One flourish: the emphasis underlines itself on load. */
.tr-below .wedge2 h2 em svg{
  position:absolute;left:0;right:0;bottom:-.04em;width:100%;height:.2em;
  overflow:visible;pointer-events:none;
}
.tr-below .wedge2 h2 em svg path{
  fill:none;stroke:var(--w-green-2);stroke-width:6;stroke-linecap:round;opacity:.85;
  stroke-dasharray:340;stroke-dashoffset:340;
  animation:wUnderline 1.1s .25s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes wUnderline{to{stroke-dashoffset:0;}}
.tr-below .wedge2 .lead{color:var(--w-muted);margin-top:1.35rem;}
.tr-below .wedge2 .lead a{color:var(--w-green);text-decoration:underline;text-underline-offset:3px;}
.tr-below .wedge2 .lead a:hover{color:#B4E084;}

/* ---- the app frame -------------------------------------------------------
   On dark a black drop shadow only muddies; a green ambient halo reads as light
   coming off the screen. */
.tr-below .wedge2 .real-mock-inner{
  box-shadow:0 0 0 1px rgba(255,255,255,.10),
             0 24px 50px -18px rgba(0,0,0,.55),
             0 60px 120px -50px rgba(124,185,60,.42);
}

/* ---- the four controls --------------------------------------------------- */
.tr-below .wedge2 .w-pts{
  max-width:1060px;margin:clamp(46px,5.6vw,74px) auto 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
.tr-below .wedge2 .w-pt{
  position:relative;display:flex;flex-direction:column;
  padding:26px 22px 24px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022));
  border:1px solid var(--w-line);
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
}
.tr-below .wedge2 .w-pt:hover{
  transform:translateY(-6px);border-color:var(--w-line-hi);
  box-shadow:0 30px 56px -26px rgba(124,185,60,.42);
}
/* Icons sit bare on the card — no tinted tile — and are drawn heavier so they
   still carry at this size. */
.tr-below .wedge2 .w-ic{width:48px;height:48px;margin-bottom:20px;}
.tr-below .wedge2 .w-ic svg{width:48px;height:48px;display:block;overflow:visible;}
/* the .86 optical scale on two icons must not thin their strokes */
.tr-below .wedge2 .w-ic svg *{vector-effect:non-scaling-stroke;}
.tr-below .wedge2 .w-pt h3{
  font-family:var(--sans);font-size:1.02rem;font-weight:700;letter-spacing:-.015em;
  line-height:1.3;color:var(--w-ink);margin:0;
}
.tr-below .wedge2 .w-pt p{
  margin:8px 0 0;font-size:.885rem;line-height:1.5;color:var(--w-muted);
}

/* ---- icon micro-animation: each demonstrates the control it labels -------- */
.tr-below .wedge2 .w-st{fill:none;stroke:var(--w-green);stroke-width:2.3;
  stroke-linecap:round;stroke-linejoin:round;}
.tr-below .wedge2 .w-fl{fill:var(--w-green);}

/* 01 the toggle knob slides on */
.tr-below .wedge2 .ic-tog .knob{transition:transform .34s cubic-bezier(.4,0,.2,1);}
/* 19px, not 13: the knob rests at cx 14.5 with r 6.8 inside a track spanning
   x 4-44, so a 3.7px inset. Mirroring that inset on the right puts it at
   cx 33.5 — 13px left it 6px shy of the end. */
.tr-below .wedge2 .w-pt:hover .ic-tog .knob{transform:translateX(19px);}
.tr-below .wedge2 .ic-tog .track{transition:fill .34s;fill:rgba(155,211,95,.30);}
.tr-below .wedge2 .w-pt:hover .ic-tog .track{fill:rgba(155,211,95,.64);}

/* 02 the day cells fill in, one after another */
.tr-below .wedge2 .ic-cal .cell{opacity:.34;transition:opacity .26s;}
.tr-below .wedge2 .w-pt:hover .ic-cal .cell{opacity:1;}
.tr-below .wedge2 .w-pt:hover .ic-cal .cell:nth-of-type(2){transition-delay:.06s;}
.tr-below .wedge2 .w-pt:hover .ic-cal .cell:nth-of-type(3){transition-delay:.12s;}
.tr-below .wedge2 .w-pt:hover .ic-cal .cell:nth-of-type(4){transition-delay:.18s;}

/* 03 the reason tag slides out of the log entry */
.tr-below .wedge2 .ic-log .tag{transform:translateX(-4px);opacity:0;
  transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s;}
.tr-below .wedge2 .w-pt:hover .ic-log .tag{transform:translateX(0);opacity:1;}

/* 04 both signatures re-draw (visible at rest — a blank icon is a broken icon) */
.tr-below .wedge2 .ic-sig .mark{stroke-width:2;stroke-dasharray:62;stroke-dashoffset:0;}
.tr-below .wedge2 .w-pt:hover .ic-sig .mark{animation:wSign .62s cubic-bezier(.4,0,.2,1);}
.tr-below .wedge2 .w-pt:hover .ic-sig .mark.b{animation-delay:.13s;}
@keyframes wSign{from{stroke-dashoffset:62;}to{stroke-dashoffset:0;}}

@media (max-width:900px){
  .tr-below .wedge2 .w-pts{grid-template-columns:1fr 1fr;gap:14px;}
}
@media (max-width:560px){
  .tr-below .wedge2 .w-pts{grid-template-columns:1fr;}
  /* GRID, not flex-row. As a flex row the icon, <h3> and <p> became three
     sibling COLUMNS, squeezing the title into ~65px — "One switch, whole team"
     wrapped onto four lines and card heights drifted (135/114/114/135).
     The icon spans both rows; title and copy stack in column two at full width. */
  .tr-below .wedge2 .w-pt{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    column-gap:16px;row-gap:6px;align-items:start;padding:20px 20px 22px;
  }
  .tr-below .wedge2 .w-ic{grid-column:1;grid-row:1 / span 2;margin:0;width:40px;height:40px;}
  .tr-below .wedge2 .w-ic svg{width:40px;height:40px;}
  .tr-below .wedge2 .w-pt h3{grid-column:2;grid-row:1;}
  .tr-below .wedge2 .w-pt p{grid-column:2;grid-row:2;margin:0;}
}
/* Keeping the flourish on mobile.
   The SVG is absolutely positioned, so it OVERFLOWS the line box without
   reserving any space — at narrow widths "looks like" wraps below the emphasis
   and its cap-height lands ~10px above the underline's lower edge. Making the
   emphasis an inline-block with bottom padding grows the line box, which pushes
   the following line down; the underline then sits inside that padding, tucked
   under the text and clear of the next line. `bottom` must track the padding,
   otherwise the underline just moves down with it and nothing is gained. */
/* 456px, not a round number: "audit readiness looks like" measures 407px at the
   clamped 32px size, plus 48px of wrap padding — so the heading only breaks to
   three lines below ~455px.

   The room for the underline comes from LINE-HEIGHT, not from padding on the
   emphasis. Padding grows only the one line box the emphasis sits in, so the
   gap under "audit readiness" ended up larger than the gap above it and the
   heading read as unevenly spaced. line-height widens every gap by the same
   amount, so the three lines stay evenly spaced and the underline still has
   somewhere to sit. `bottom` is relative to the inline font box, not the line
   box, so the stroke keeps a fixed offset from the text as the leading grows. */
@media (max-width:456px){
  /* 1.44 / -.15em chosen by rendering the real three-line wrap at 300px and
     comparing candidates. The underline has to read as belonging to "audit
     readiness" without crowding "looks like"; pushing `bottom` further only
     moves the stroke TOWARD the next line, so the clearance has to come from
     leading. Every gap widens equally, so the three lines stay evenly spaced. */
  .tr-below .wedge2 h2{line-height:1.44;}
  /* bottom:0 puts the stroke ~8px lower than .25em. Chosen by rendering the real
   three-line wrap at 300px: at .25em the stroke visibly touched the letterforms.
   Going much below 0 starts crowding "looks like", so this is the usable floor
   at this line-height. */
  .tr-below .wedge2 h2 em svg{bottom:.06em;height:.16em;}
}

@media (prefers-reduced-motion:reduce){
  .tr-below .wedge2 *,.tr-below .wedge2 *::before,.tr-below .wedge2 *::after{
    transition:none!important;animation:none!important;}
  .tr-below .wedge2 h2 em svg path{stroke-dashoffset:0;}
  .tr-below .wedge2 .ic-cal .cell{opacity:1;}
  .tr-below .wedge2 .ic-log .tag{opacity:1;transform:none;}
}

/* Signature draws itself when the wedge scrolls into view. pathLength="1"
   normalises every stroke so one dasharray works for all three. JS adds
   .is-signed (home-below.js); without JS the signature is simply already there. */
.tr-below .wedge2.will-sign .sig path{stroke-dasharray:1;stroke-dashoffset:1;}
.tr-below .wedge2.will-sign .sig .dot{opacity:0;}
/* Four strokes drawn in the order a hand would write them: capital, given
   name, surname, flourish. */
/* Drawn one letter at a time. A single constant-speed sweep across the whole
   word reads as a machine; per-letter strokes each accelerate out of the join and
   decelerate into the next, which is what makes it look handwritten. Duration is
   proportional to how far the pen travels, set inline per path. */
.tr-below .wedge2.is-signed .sig path{animation-name:wDraw;animation-fill-mode:forwards;
  animation-timing-function:cubic-bezier(.32,.04,.36,1);}
.tr-below .wedge2.is-signed .sig .dot{animation-name:wDot;animation-duration:.16s;
  animation-fill-mode:forwards;}
@keyframes wDot{to{opacity:1;}}
@keyframes wDraw{to{stroke-dashoffset:0;}}
@media (prefers-reduced-motion:reduce){
  .tr-below .wedge2.will-sign .sig path{stroke-dashoffset:0;}
  .tr-below .wedge2.will-sign .sig .dot{opacity:1;}
}

/* ============================================================================
   INTELLIGENCE — iconography + tier pills only. Layout, background, grid, type
   and copy are unchanged from the live section.
   `.is-on` mirrors every `:hover` rule so the state can be forced for review
   (and reused for touch later). Both halves of each pair keep the full
   descendant chain — collapsing them onto one selector would target the tile.
   ========================================================================== */

/* ---- 1. bolder glyphs ----------------------------------------------------
   26px @ 1.7 stroke in #A855F7 read thin and washed out inside a 58px plate.
   28px @ 2.05 in a deeper violet carries the plate without adding weight. */
.tr-below .intel-tile__icon{
  color:#7C3AED;
  transition:transform .32s var(--ease),border-color .32s,box-shadow .32s,background .32s;
}
.tr-below .intel-tile__glyph{width:28px;height:28px;stroke-width:2.05;overflow:visible;}
.tr-below .intel-tile__spark{width:14px;height:14px;transition:transform .32s var(--ease);}
.tr-below .intel-tile:hover .intel-tile__spark,
.tr-below .intel-tile.is-on .intel-tile__spark{transform:scale(1.18) rotate(12deg);}
.tr-below .intel-tile:hover .intel-tile__icon,
.tr-below .intel-tile.is-on .intel-tile__icon{
  background:linear-gradient(150deg,rgba(236,72,153,.17),rgba(168,85,247,.17) 50%,rgba(59,130,246,.17));
}

/* ---- 2. each icon performs its own capability ---------------------------- */
.tr-below .intel-tile__glyph *{transform-box:fill-box;transform-origin:center;}

/* Smart Import — the arrow drops into the tray */
.tr-below .g-import .im-arrow{transition:transform .34s cubic-bezier(.34,.8,.4,1);}
.tr-below .intel-tile:hover .g-import .im-arrow,
.tr-below .intel-tile.is-on .g-import .im-arrow{transform:translateY(2.6px);}

/* Polished Notes — the pen stays anchored and writes a line beneath it.
   Translating the whole pen just slid it off-axis with nothing happening. */
.tr-below .g-notes .pn-line{stroke-dasharray:1;stroke-dashoffset:1;}
.tr-below .intel-tile:hover .g-notes .pn-line,
.tr-below .intel-tile.is-on .g-notes .pn-line{animation:pnWrite .55s cubic-bezier(.4,0,.3,1) forwards;}
@keyframes pnWrite{to{stroke-dashoffset:0;}}

/* Calendar Capture — an event lands in the grid */
.tr-below .g-cal .cc-ev{transform:scale(.2);opacity:0;
  transition:transform .34s cubic-bezier(.22,1,.36,1),opacity .24s;}
.tr-below .intel-tile:hover .g-cal .cc-ev,
.tr-below .intel-tile.is-on .g-cal .cc-ev{transform:scale(1);opacity:1;}

/* Auto-Scheduling — the hands sweep about the dial centre.
   The global transform-box:fill-box above makes transform-origin resolve
   against the hands' OWN bounding box, which threw them outside the circle;
   view-box puts 12,12 back at the centre of the dial. */
.tr-below .g-sched .as-hands{transform-box:view-box;transform-origin:12px 12px;
  transition:transform .6s cubic-bezier(.34,.8,.4,1);}
.tr-below .intel-tile:hover .g-sched .as-hands,
.tr-below .intel-tile.is-on .g-sched .as-hands{transform:rotate(150deg);}

/* Predictive Allocation — the second person is anticipated */
.tr-below .g-alloc .pa-2{opacity:.32;transform:translateX(-1.6px);
  transition:opacity .34s ease,transform .34s cubic-bezier(.34,.8,.4,1);}
.tr-below .intel-tile:hover .g-alloc .pa-2,
.tr-below .intel-tile.is-on .g-alloc .pa-2{opacity:1;transform:translateX(0);}

/* Utilization Forecasting — the trend line redraws */
.tr-below .g-fc .uf-line{stroke-dasharray:1;stroke-dashoffset:0;}
.tr-below .intel-tile:hover .g-fc .uf-line,
.tr-below .intel-tile.is-on .g-fc .uf-line{animation:ufDraw .62s cubic-bezier(.4,0,.3,1);}
@keyframes ufDraw{from{stroke-dashoffset:1;}to{stroke-dashoffset:0;}}

@media (prefers-reduced-motion:reduce){
  .tr-below .intel-tile__glyph *,.tr-below .intel-tile__icon,
  .tr-below .g-cal .cc-ev{transform:scale(1);opacity:1;}
  .tr-below .g-alloc .pa-2{opacity:1;transform:none;}
  .tr-below .g-notes .pn-line{stroke-dashoffset:0;}
}

/* Plan pills: reverted to the original design — the tier-meter variant drew
   attention away from the feature names. */
.tr-below .intel-tile__plan{align-self:flex-start;margin-top:18px;font-family:var(--sans);font-size:.72rem;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:100px;line-height:1.3;}
.tr-below .intel-tile__plan--team{color:var(--green-ink);background:rgba(95,175,8,.13);}
.tr-below .intel-tile__plan--professional{color:#2563EB;background:rgba(37,99,235,.10);}
.tr-below .intel-tile__plan--enterprise{color:#7C3AED;background:rgba(124,58,237,.10);}

/* The wedge lead links "DCAA audit"; letting it break across lines split the
   term in half mid-sentence. */
.tr-below .wedge2 .lead a { white-space: nowrap; }


/* ============================================================================
   FAQ COMPONENT - shared by the homepage, /pricing/ and /integrations/

   ONE COPY. This lived twice: `.tr-home-page .tr-faq .tr-faq__*` in home.css (front-page
   only) and a hand-port in integrations.css, because /pricing/ and /integrations/
   load this file and never home.css. Both copies are now deleted in favour of this.

   HOW ONE COPY SERVES THREE DIFFERENT PALETTES. The homepage FAQ is not inside
   `.tr-below` (front-page.php includes parts/home/faq.php directly, and that part
   carries no such wrapper), so the `.tr-below` tokens are undefined there and every
   var() below falls through to its WP-preset fallback - which is exactly what the
   homepage rules used explicitly. On /pricing/ and /integrations/ the markup IS
   inside `.tr-below`, so the same declarations resolve to the warmer Harvest tokens
   and the component sits correctly on paper.

   Verified before deleting the originals: --ink, --muted, --line, --faint and
   --serif are defined ONLY on `.tr-below` in this file - never at :root, never on
   body, never in home.css. If that ever changes, the homepage FAQ silently changes
   colour, so keep those tokens scoped.

   SCOPED TO THE COMPONENT ROOT `.tr-faq`, which every one of the three sections now
   carries. That is not cosmetic. Unscoped `.tr-faq__lead` is specificity (0,1,0) and
   LOSES to `.tr-below p { margin: 0 }` and `.tr-below h2 { line-height: 1.06 }`, both
   (0,1,1), in this same file. The homepage's old rules were `.tr-home-page`-prefixed
   at (0,2,0) so they never hit this; the first unscoped version did, and on /pricing/
   the lead's margin computed to 0 and the title's descenders overlapped the lead by
   10px. `.tr-faq .tr-faq__lead` is (0,2,0) and wins on all three pages.
   Section padding stays with each page; this is the component only.
   ========================================================================== */
.tr-faq .tr-faq__grid {
	display: grid; grid-template-columns: 0.72fr 1.28fr; gap: clamp(30px, 5vw, 64px);
	max-width: 1120px; margin-inline: auto; align-items: start;
}
/* The intro column is mostly whitespace beside the accordion; let it track the
   scroll so the heading stays with you while scanning. */
@media (min-width: 861px) { .tr-faq .tr-faq__intro { position: sticky; top: 96px; } }
/* NOT sticky inside `.tr-below`. That element carries `overflow-x: clip`, which makes
   it the sticky containing block instead of the viewport, so the intro tracked the
   wrong box and read as a rendering artefact on /pricing/ and /integrations/. The
   homepage FAQ is not inside `.tr-below`, so it keeps the intended behaviour. Equal
   specificity to the rule above, so source order decides: this must stay after it. */
.tr-below .tr-faq__intro { position: static; }
.tr-faq .tr-faq__title {
	font-family: var(--serif, var(--wp--preset--font-family--display));
	font-size: clamp(1.85rem, 3.4vw, 2.5rem); font-weight: 600; line-height: 1.1;
	letter-spacing: -0.02em; margin: 0; text-wrap: balance;
	color: var(--ink, var(--wp--preset--color--ink));
}
.tr-faq .tr-faq__lead {
	color: var(--muted, var(--wp--preset--color--ink-muted));
	/* 1.25rem, not 1rem. The title runs at line-height 1.1, which is tighter than the
	   glyphs, so its descenders sit ~12px below its box and 1rem left the lead looking
	   welded to it. This is 4px more than the homepage had; it applies to all three. */
	margin: 1.25rem 0 0; font-size: 1.02rem; line-height: 1.55;
}
.tr-faq .tr-faq__lead a {
	color: var(--ink, var(--wp--preset--color--ink)); text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--green, var(--wp--preset--color--green)) 55%, transparent);
	text-underline-offset: 3px;
}
.tr-faq .tr-faq__lead a:hover { color: var(--green-mid, var(--cmp-green, #3F8514)); }

/* Hairline rows, no cards and no colour fills - a tinted-green open state read as a
   dated accordion. Emphasis on the open item comes from spacing alone. */
.tr-faq .tr-faq__list { border-top: 1px solid var(--line, var(--wp--preset--color--line)); }
.tr-faq .tr-faq__item { border-bottom: 1px solid var(--line, var(--wp--preset--color--line)); }
.tr-faq .tr-faq__q {
	list-style: none; cursor: pointer;
	display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
	font-family: var(--serif, var(--wp--preset--font-family--display));
	font-size: 1.24rem; font-weight: 600; line-height: 1.36; letter-spacing: -0.012em;
	color: var(--ink, var(--wp--preset--color--ink)); padding: 26px 2px;
	transition: color .2s ease;
}
.tr-faq .tr-faq__q:hover { color: var(--green-mid, var(--cmp-green, #3F8514)); }
/* Both are needed: the pseudo-element for WebKit, ::marker for everyone else. */
.tr-faq .tr-faq__q::-webkit-details-marker { display: none; }
.tr-faq .tr-faq__q::marker { content: ""; }
.tr-faq .tr-faq__item[open] .tr-faq .tr-faq__q { padding-bottom: 14px; }
/* Plus turning into a minus. Flex-aligned rather than absolutely positioned, so it
   stays put when a question wraps to two lines. */
.tr-faq .tr-faq__mark { position: relative; flex: none; width: 18px; height: 18px; margin-top: 5px; }
.tr-faq .tr-faq__mark::before,
.tr-faq .tr-faq__mark::after {
	content: ""; position: absolute;
	background: var(--faint, var(--wp--preset--color--ink-faint)); border-radius: 2px;
	transition: transform .3s var(--ease, cubic-bezier(.2,.75,.2,1)), background .2s ease;
}
.tr-faq .tr-faq__mark::before { left: 0; right: 0; top: 8px; height: 1.5px; }
.tr-faq .tr-faq__mark::after { top: 0; bottom: 0; left: 8.25px; width: 1.5px; }
.tr-faq .tr-faq__item[open] .tr-faq .tr-faq__mark::after { transform: scaleY(0); }
.tr-faq .tr-faq__q:hover .tr-faq .tr-faq__mark::before,
.tr-faq .tr-faq__q:hover .tr-faq .tr-faq__mark::after { background: var(--green-mid, var(--cmp-green, #3F8514)); }
.tr-faq .tr-faq__a {
	padding: 0 42px 28px 0; color: var(--muted, var(--wp--preset--color--ink-muted));
	font-size: 1rem; line-height: 1.65; max-width: 64ch;
}
/* Links inside an FAQ answer. Added 2026-08-18: the compliance answer on the two integration
   pages is the first FAQ on the site to contain one, and until now nothing styled them, so they
   inherited body colour with no underline and read as plain text despite being clickable.
   Matches the link treatment used elsewhere in this stylesheet: green ink, underline at a 3px
   offset, the rule itself tinted back so it reads as emphasis rather than a hard line, and
   full-strength on hover. */
.tr-faq .tr-faq__a a {
	color: var(--green-ink, #2C5D0E); font-weight: 550;
	text-decoration: underline; text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, var(--green, #5FAF08) 50%, transparent);
	transition: color .15s, text-decoration-color .15s;
}
.tr-faq .tr-faq__a a:hover,
.tr-faq .tr-faq__a a:focus-visible {
	color: var(--green-deep, #34700F); text-decoration-color: currentColor;
}
@media (max-width: 820px) { .tr-faq .tr-faq__grid { grid-template-columns: 1fr; gap: 1.5rem; } }
@media (prefers-reduced-motion: reduce) {
	.tr-faq .tr-faq__mark::before, .tr-faq .tr-faq__mark::after { transition: none; }
}