/* TRIAL components — every value comes from tokens.css */
@import url("https://fonts.googleapis.com/css2?family=Hammersmith+One&family=K2D:wght@400;600;700&family=Catamaran:wght@400;600&display=swap");

body { background: var(--surface); color: var(--ink); font-family: var(--font-body); margin: 0; }

/* Button */
.trl-btn { font-family: var(--font-subtitle); font-weight: 700; border: var(--line-min) solid transparent; border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); line-height: 1; }
.trl-btn--md { font-size: 19px; padding: 12px 24px; }
.trl-btn--sm { font-size: 16px; padding: var(--space-2) var(--space-4); }
.trl-btn--primary { background: var(--brand); color: var(--on-brand); }
.trl-btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.trl-btn--quiet { background: transparent; color: var(--ink); padding-left: 0; padding-right: 0; border-width: 0; text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: var(--line-min); text-underline-offset: 6px; }
.trl-btn--primary:hover { background: var(--green-mid); }
.trl-btn--secondary:hover { background: var(--surface-alt); }
.trl-btn { transition: background-color var(--motion-instant, 100ms) var(--ease-rise, cubic-bezier(0.16, 1, 0.3, 1)), color var(--motion-instant, 100ms) var(--ease-rise, cubic-bezier(0.16, 1, 0.3, 1)), border-color var(--motion-instant, 100ms) var(--ease-rise, cubic-bezier(0.16, 1, 0.3, 1)); }
.trl-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.trl-btn:disabled { background: var(--surface-alt); color: var(--ink-muted); border-color: transparent; cursor: not-allowed; }

/* TextField */
.trl-field { display: flex; flex-direction: column; gap: var(--space-2); max-width: 360px; }
.trl-field__label { font-family: var(--font-subtitle); font-weight: 600; font-size: 16px; line-height: 22px; color: var(--ink); }
.trl-field__input { font-family: var(--font-body); font-size: 16px; line-height: 26px; color: var(--ink); background: var(--surface-alt); border: 0; border-bottom: var(--line-min) solid var(--ink-muted); border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: var(--space-2) 12px; }
.trl-field__input { transition: border-color var(--motion-instant, 100ms) var(--ease-rise, cubic-bezier(0.16, 1, 0.3, 1)); }
.trl-field__input::placeholder { color: var(--ink-muted); }
.trl-field__input:focus { outline: 3px solid var(--ink); outline-offset: 2px; border-bottom-color: var(--ink); }
.trl-field__hint { font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.trl-field__error { align-self: flex-start; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--white); background: var(--alert); padding: 2px var(--space-2); border-radius: var(--radius-sm); }
.trl-field--error .trl-field__input { border-bottom-color: var(--ink); }

/* Card */
.trl-card { background: var(--surface-alt); color: var(--ink); border-radius: var(--radius-md); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-2); max-width: 420px; }
.trl-card--inverse { background: var(--surface-inverse); color: var(--white); }
.trl-card__eyebrow { margin: 0; font-family: var(--font-subtitle); font-weight: 600; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.trl-card--inverse .trl-card__eyebrow { color: var(--gray-200); }
.trl-card__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 38px; }
.trl-card__body { font-size: 16px; line-height: 26px; }
.trl-card__footer { margin-top: var(--space-4); display: flex; gap: var(--space-4); align-items: center; }

/* Tag */
.trl-tag { display: inline-flex; align-items: center; font-family: var(--font-subtitle); font-weight: 600; font-size: 14px; line-height: 20px; padding: var(--space-1) 12px; border-radius: var(--radius-sm); }
.trl-tag--neutral { background: var(--surface-alt); color: var(--ink); }
.trl-tag--inverse { background: var(--surface-inverse); color: var(--white); }
.trl-tag--hashtag { background: transparent; color: inherit; padding-left: 0; padding-right: 0; font-size: 16px; }
.trl-tag__hash { color: var(--brand); margin-right: 1px; }

/* Diamond (losango) */
.trl-diamond { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.trl-diamond::before { content: ""; position: absolute; width: 70.71%; height: 70.71%; transform: rotate(45deg); border-radius: 13%; background: var(--brand); }
.trl-diamond--green-mid::before { background: var(--green-mid); }
.trl-diamond--inverse::before { background: var(--surface-inverse); }
.trl-diamond--alert::before { background: var(--alert); }
.trl-diamond__content { position: relative; font-family: var(--font-display); line-height: 1; color: var(--on-brand); display: inline-flex; }
.trl-diamond--inverse .trl-diamond__content, .trl-diamond--alert .trl-diamond__content { color: var(--white); }
.trl-diamond__content img { width: 1.2em; height: 1.2em; }

/* Motion — everything grows into quadrant 1 (up and to the right) */
@keyframes trl-rise-in { from { opacity: 0; transform: translate(calc(-1 * var(--motion-shift, 8px)), var(--motion-shift, 8px)) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes trl-rise-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate(var(--motion-shift, 8px), calc(-1 * var(--motion-shift, 8px))); } }
.trl-rise { transform-origin: 0% 100%; animation: trl-rise-in var(--motion-base, 300ms) var(--ease-rise, cubic-bezier(0.16, 1, 0.3, 1)) both; }
.trl-rise--quick { animation-duration: var(--motion-quick, 200ms); }
.trl-rise--out { animation: trl-rise-out var(--motion-quick, 200ms) var(--ease-sunrise, cubic-bezier(0.7, 0, 0.84, 0)) both; }

/* LogoReveal — the T animation, timed from trial-t-reveal.mp4 (30 fps).
   Each section finishes, holds, then the next starts, while the T climbs the sunrise path (sunrise-motion.svg):
   0–230ms    the 1 unfolds, at stop 1                       → hold
   300–500ms  the arrow slides out, the T grows 1 → 2 (stage turns dark 300–400ms)
   490–560ms  the minor curve is painted green, ↗ with a hard edge → hold
   593–683ms  the middle curve is painted ↗ → hold at stop 2
   733–850ms  the arrow is painted ↗ to the tip, the T grows 2 → 3 (twice as far) and lands
   850ms+     sunrise: glow, halo and light behind the T */
.trl-reveal { position: relative; display: inline-block; flex: none; }
.trl-reveal__glyph { position: absolute; inset: 0; }
.trl-reveal__layer { position: absolute; inset: 0; }
.trl-reveal__layer svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.trl-reveal__halo { position: absolute; left: -70%; top: -70%; width: 240%; height: 240%; border-radius: 50%; background: radial-gradient(closest-side, rgba(36, 199, 66, 0.42), rgba(36, 199, 66, 0.12) 55%, rgba(36, 199, 66, 0) 100%); opacity: 0; pointer-events: none; }
.trl-reveal--light .trl-reveal__halo { display: none; }
.trl-reveal:not(.trl-reveal--play) .trl-reveal__halo { opacity: 1; }
/* light ground: only the green T. inverse/stage: the white T is painted green with a hard edge, section by section */
.trl-reveal__layer .trl-reveal__light, .trl-reveal__layer .trl-reveal__band { display: none; }
.trl-reveal--inverse .trl-reveal__layer .trl-reveal__light, .trl-reveal--stage .trl-reveal__layer .trl-reveal__light,
.trl-reveal--inverse .trl-reveal__layer .trl-reveal__band, .trl-reveal--stage .trl-reveal__layer .trl-reveal__band { display: block; }
.trl-reveal--inverse .trl-reveal__glyph, .trl-reveal--stage .trl-reveal__glyph { filter: drop-shadow(0 0 9px rgba(36, 199, 66, 0.7)); }

@keyframes trl-reveal-travel {
  0%, 35.3% { transform: translate(-30%, 30%) scale(0.5); animation-timing-function: cubic-bezier(0.45, 0, 0.3, 1); }
  58.8%, 82.4% { transform: translate(-20%, 20%) scale(0.7); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  100% { transform: none; }
}
@keyframes trl-reveal-draw {
  0% { clip-path: inset(0 0 79% 0); transform: perspective(600px) rotateY(80deg); opacity: 0.4; }
  40% { clip-path: inset(0 0 62% 0); transform: perspective(600px) rotateY(0deg); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); transform: none; opacity: 1; }
}
@keyframes trl-reveal-arrow { 0% { opacity: 0; transform: translate(-34%, 4%); } 40% { opacity: 0.45; } 100% { opacity: 1; transform: none; } }
/* the paint follows the curve up to the top right (↗) with a hard edge: minor curve, then middle curve, then the arrow */
@keyframes trl-reveal-fill-minor { from { clip-path: polygon(0% 100%, 0% 100%, 0% 100%); } to { clip-path: polygon(0% 100%, 0% 0%, 100% 100%); } }
@keyframes trl-reveal-fill-mid { from { clip-path: polygon(0% 100%, 0% 100%, 0% 100%); } to { clip-path: polygon(0% 100%, 0% -30%, 130% 100%); } }
@keyframes trl-reveal-fill-arrow { from { clip-path: polygon(0% 100%, 0% 22%, 78% 100%); } to { clip-path: polygon(0% 100%, 0% -105%, 205% 100%); } }
@keyframes trl-reveal-halo { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: none; } }
@keyframes trl-reveal-glow { from { filter: drop-shadow(0 0 0 rgba(36, 199, 66, 0)); } to { filter: drop-shadow(0 0 9px rgba(36, 199, 66, 0.7)); } }

.trl-reveal--play { animation: trl-reveal-travel 850ms linear both; }
.trl-reveal--play .trl-reveal__one { transform-origin: 0% 25%; animation: trl-reveal-draw 230ms cubic-bezier(0.45, 0, 0.3, 1) both; }
.trl-reveal--play .trl-reveal__arrow { animation: trl-reveal-arrow var(--motion-quick, 200ms) var(--ease-rise, cubic-bezier(0.16, 1, 0.3, 1)) 300ms both; }
.trl-reveal--play.trl-reveal--inverse .trl-reveal__minor.trl-reveal__band, .trl-reveal--play.trl-reveal--stage .trl-reveal__minor.trl-reveal__band { animation: trl-reveal-fill-minor 70ms linear 470ms both; }
.trl-reveal--play.trl-reveal--inverse .trl-reveal__minor.trl-reveal__fill, .trl-reveal--play.trl-reveal--stage .trl-reveal__minor.trl-reveal__fill { animation: trl-reveal-fill-minor 70ms linear 490ms both; }
.trl-reveal--play.trl-reveal--inverse .trl-reveal__mid.trl-reveal__band, .trl-reveal--play.trl-reveal--stage .trl-reveal__mid.trl-reveal__band { animation: trl-reveal-fill-mid 90ms linear 573ms both; }
.trl-reveal--play.trl-reveal--inverse .trl-reveal__mid.trl-reveal__fill, .trl-reveal--play.trl-reveal--stage .trl-reveal__mid.trl-reveal__fill { animation: trl-reveal-fill-mid 90ms linear 593ms both; }
.trl-reveal--play.trl-reveal--inverse .trl-reveal__arrow .trl-reveal__band, .trl-reveal--play.trl-reveal--stage .trl-reveal__arrow .trl-reveal__band { animation: trl-reveal-fill-arrow 117ms linear 713ms both; }
.trl-reveal--play.trl-reveal--inverse .trl-reveal__arrow .trl-reveal__fill, .trl-reveal--play.trl-reveal--stage .trl-reveal__arrow .trl-reveal__fill { animation: trl-reveal-fill-arrow 117ms linear 733ms both; }
.trl-reveal--play .trl-reveal__halo { animation: trl-reveal-halo calc(2 * var(--motion-base, 300ms)) var(--ease-rise, cubic-bezier(0.16, 1, 0.3, 1)) 850ms both; }
.trl-reveal--play.trl-reveal--inverse .trl-reveal__glyph, .trl-reveal--play.trl-reveal--stage .trl-reveal__glyph { animation: trl-reveal-glow calc(2 * var(--motion-base, 300ms)) var(--ease-rise, cubic-bezier(0.16, 1, 0.3, 1)) 850ms both; }

/* Stage — the full opening: green field turns to the faceted gray-ink ground, and the sun rises behind the T */
.trl-stage { position: relative; overflow: hidden; background: var(--gray-ink); border-radius: var(--radius-md, 8px); display: flex; align-items: center; justify-content: center; }
.trl-stage__facets { position: absolute; left: -6%; top: -6%; width: 112%; height: 112%; }
.trl-stage__sun { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 75% at 50% 52%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0) 70%); }
.trl-stage__field { position: absolute; inset: 0; background: var(--green); opacity: 0; }
@keyframes trl-stage-field { from { opacity: 1; } to { opacity: 0; } }
@keyframes trl-stage-drift { from { transform: translate(-3%, 3%) scale(1.04); } to { transform: none; } }
@keyframes trl-stage-sun { from { opacity: 0; transform: translate(-8%, 10%) scale(0.35); } to { opacity: 1; transform: none; } }
.trl-stage--play .trl-stage__field { animation: trl-stage-field var(--motion-instant, 100ms) linear 300ms both; }
.trl-stage--play .trl-stage__facets { animation: trl-stage-drift calc(3 * var(--motion-intro, 1000ms)) var(--ease-rise, cubic-bezier(0.16, 1, 0.3, 1)) both; }
.trl-stage--play .trl-stage__sun { animation: trl-stage-sun calc(2 * var(--motion-intro, 1000ms)) var(--ease-rise, cubic-bezier(0.16, 1, 0.3, 1)) 850ms both; }

@keyframes trl-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  /* no travel or growth: content fades in where it ends up */
  .trl-rise { animation: trl-fade-in var(--motion-base, 300ms) linear both; }
  .trl-rise--out { animation: none; opacity: 0; }
  .trl-reveal--play .trl-reveal__one, .trl-reveal--play .trl-reveal__arrow { animation: none; }
  .trl-reveal--play { animation: trl-fade-in var(--motion-base, 300ms) linear both; }
  .trl-reveal--play .trl-reveal__fill, .trl-reveal--play .trl-reveal__band, .trl-reveal--play .trl-reveal__halo, .trl-reveal--play .trl-reveal__glyph { animation: none; }
  .trl-reveal--play .trl-reveal__halo { opacity: 1; }
  .trl-stage--play .trl-stage__field, .trl-stage--play .trl-stage__facets, .trl-stage--play .trl-stage__sun { animation: none; }
  .trl-btn, .trl-field__input { transition: none; }
}

/* Letterhead — the TRIAL stationery page (from Papelaria › [2026] [v1] Modelo de contrato). A4, laid out in pt. */
.trl-sheet { width: 595pt; height: 842pt; position: relative; overflow: hidden; background: var(--white); color: var(--gray-ink); font-family: var(--font-body); font-size: 12pt; line-height: 1.77; box-sizing: border-box; flex: none; }
.trl-sheet * { box-sizing: border-box; }
.trl-sheet__corner { position: absolute; background: var(--green-light); }
.trl-sheet__corner--top { left: 0; top: 0; width: 183pt; height: 157pt; clip-path: polygon(0 0, 100% 0, 66.7% 100%, 0 68%); }
.trl-sheet__corner--bottom { right: 0; bottom: 0; width: 90pt; height: 79pt; clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%); }
.trl-sheet__t { position: absolute; display: block; }
.trl-sheet__t svg { display: block; width: 100%; height: 100%; }
.trl-sheet__brand { position: absolute; left: 183pt; top: 31pt; font-family: var(--font-display); font-size: 17pt; line-height: 1; color: var(--green-light); }
.trl-sheet__slab { position: absolute; left: 138pt; top: 56pt; width: 231pt; height: 70pt; background: var(--gray-ink); clip-path: polygon(14.3% 0, 100% 0, 88.3% 100%, 0 100%); }
.trl-sheet__title { position: absolute; left: 181pt; top: 64pt; font-family: var(--font-display); font-size: 36pt; line-height: 54pt; color: var(--white); white-space: nowrap; }
.trl-sheet__subtitle { position: absolute; left: 181pt; top: 128pt; font-family: var(--font-display); font-size: 21pt; line-height: 1; color: var(--gray-ink); white-space: nowrap; }
.trl-sheet__note { position: absolute; left: 181pt; top: 157pt; font-size: 8pt; line-height: 1; }
.trl-sheet__ref { position: absolute; right: 30pt; top: 30pt; font-family: var(--font-display); font-size: 12.5pt; line-height: 1; white-space: nowrap; }
.trl-sheet__ref-label { margin-right: 10pt; font-size: 10.5pt; }
.trl-sheet__rule { position: absolute; height: 1.2pt; background: var(--teal); transform-origin: 0 50%; }
.trl-sheet__rule--ref { left: 514pt; top: 62pt; width: 84pt; transform: rotate(-13deg); }
.trl-sheet__count { position: absolute; right: 26pt; top: 352pt; width: 30pt; height: 36pt; font-family: var(--font-display); font-size: 10pt; line-height: 1; text-align: center; }
.trl-sheet__count-page { position: absolute; left: 8pt; top: 6pt; color: var(--green-light); }
.trl-sheet__count-total { position: absolute; left: 13pt; top: 22pt; color: var(--gray); }
.trl-sheet__count-slash { position: absolute; left: 2pt; top: 19pt; width: 22pt; height: 1.2pt; background: var(--gray); transform: rotate(-14deg); }
.trl-sheet__rule--count { left: 30pt; top: 0; width: 44pt; background: var(--green-light); transform: rotate(20deg); }
.trl-sheet__body { position: absolute; left: 70pt; right: 57pt; top: 196pt; bottom: 96pt; overflow: hidden; }
.trl-sheet--continued .trl-sheet__body { top: 60pt; }
.trl-sheet__body p { margin: 0 0 8pt; }
.trl-sheet__body h2 { margin: 14pt 0 10pt; font-family: var(--font-display); font-weight: 400; font-size: 24pt; line-height: 1.25; color: var(--gray-ink); }
.trl-sheet__body h3 { margin: 12pt 0 2pt; font-family: var(--font-display); font-weight: 400; font-size: 12pt; line-height: 1.5; color: var(--gray-ink); }
.trl-sheet__body ul, .trl-sheet__body ol { margin: 0 0 8pt; padding-left: 36pt; }
.trl-sheet__body li { margin: 0 0 3pt; line-height: 16pt; }
.trl-sheet__body a { color: #24c8aa; font-weight: 700; }
.trl-sheet__body data { font-family: var(--font-subtitle); }
.trl-sheet__body table { width: 100%; border-collapse: collapse; margin: 0 0 8pt; font-size: 10pt; line-height: 1.4; }
.trl-sheet__body th, .trl-sheet__body td { border: 3pt solid var(--gray-ink); padding: 3pt 5pt; vertical-align: middle; text-align: left; }
.trl-sheet__body th { background: var(--gray-ink); color: var(--white); font-family: var(--font-display); font-weight: 400; }
.trl-sheet__body th[scope="row"] { background: var(--green-light); color: var(--gray-ink); font-weight: 700; }
.trl-sheet__body > :first-child { margin-top: 0; }
.trl-sheet__body strong { font-weight: 700; }
.trl-sheet__foot-slab { position: absolute; left: 0; bottom: 29pt; width: 102pt; height: 28pt; background: var(--gray-ink); clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%); }
.trl-sheet__foot-title { position: absolute; left: 22pt; bottom: 33pt; font-family: var(--font-display); font-size: 14.5pt; line-height: 20pt; color: var(--white); white-space: nowrap; }
.trl-sheet__foot-sub { position: absolute; left: 98pt; bottom: 26pt; font-family: var(--font-subtitle); font-weight: 600; font-size: 8pt; line-height: 11pt; white-space: nowrap; }
.trl-sheet__contacts { position: absolute; right: 80pt; bottom: 34pt; display: grid; grid-template-columns: auto auto; gap: 3pt 10pt; justify-items: end; font-family: var(--font-subtitle); font-size: 7.5pt; line-height: 13pt; }
.trl-sheet__contact { display: inline-flex; align-items: center; gap: 3pt; white-space: nowrap; }
.trl-sheet__contact img { width: 15pt; height: 15pt; display: block; }
.trl-sheet__legal { position: absolute; right: 88pt; bottom: 9pt; font-family: var(--font-subtitle); font-size: 7.5pt; line-height: 13pt; white-space: nowrap; }
.trl-sheet__legal strong { font-weight: 700; margin-right: 14pt; }
.trl-sheet-frame { overflow: hidden; flex: none; box-shadow: 0 0 0 1px var(--gray-200); }
.trl-sheet-frame > .trl-sheet { transform-origin: 0 0; }
@media print { .trl-sheet-frame { width: auto !important; height: auto !important; box-shadow: none; } .trl-sheet-frame > .trl-sheet { transform: none !important; break-after: page; } }

/* Receipt — the TRIAL recibo (from Papelaria › Recibo › Modelo de Recibo). Landscape, 3:2, laid out in pt. */
.trl-receipt { width: 600pt; height: 400pt; position: relative; overflow: hidden; background: var(--gray-100); color: var(--gray-ink); font-family: var(--font-subtitle); box-sizing: border-box; flex: none; }
.trl-receipt * { box-sizing: border-box; }
.trl-receipt__corner { position: absolute; left: 0; top: 0; width: 116pt; height: 103pt; background: var(--green-light); clip-path: polygon(0 0, 100% 0, 72% 100%, 0 75%); }
.trl-receipt__slab { position: absolute; left: 88pt; top: 20pt; width: 168pt; height: 57pt; background: var(--gray-ink); clip-path: polygon(17% 0, 100% 0, 83% 100%, 0 100%); }
.trl-receipt__title { position: absolute; left: 118pt; top: 20pt; margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 34pt; line-height: 57pt; color: var(--white); }
.trl-receipt__subtitle { position: absolute; left: 118pt; top: 82pt; margin: 0; font-family: var(--font-display); font-size: 17pt; line-height: 1; }
.trl-receipt__ref { position: absolute; right: 20pt; top: 36pt; margin: 0; font-family: var(--font-display); font-size: 24pt; line-height: 1; white-space: nowrap; }
.trl-receipt__ref small, .trl-receipt__amount small { font-size: 12pt; color: var(--gray); margin: 0 4pt; }
.trl-receipt__amount { position: absolute; right: 40pt; top: 76pt; margin: 0; font-family: var(--font-display); font-size: 28pt; line-height: 1; white-space: nowrap; }
.trl-receipt__body { position: absolute; left: 20pt; right: 20pt; top: 128pt; font-family: var(--font-body); font-size: 16.5pt; line-height: 23pt; text-align: justify; color: var(--gray); }
.trl-receipt__body p { margin: 0 0 14pt; }
.trl-receipt__body strong { font-family: var(--font-subtitle); font-weight: 700; color: var(--gray-ink); }
.trl-receipt__sign { position: absolute; left: 20pt; top: 300pt; width: 170pt; padding-top: 22pt; border-bottom: 1.2pt solid var(--gray); font-size: 11pt; line-height: 1; }
.trl-receipt__company { position: absolute; left: 20pt; top: 336pt; margin: 0; font-weight: 700; font-size: 13pt; line-height: 1.2; }
.trl-receipt__cnpj { position: absolute; left: 20pt; top: 358pt; margin: 0; font-size: 9pt; line-height: 1; }
.trl-receipt__place { position: absolute; right: 20pt; top: 298pt; margin: 0; font-family: var(--font-display); font-size: 16.5pt; line-height: 1; white-space: nowrap; }
.trl-receipt__address { position: absolute; right: 20pt; top: 337pt; margin: 0; font-size: 9.5pt; line-height: 1; white-space: nowrap; }
.trl-receipt__contacts { position: absolute; right: 20pt; top: 356pt; display: flex; gap: 12pt; font-size: 10pt; line-height: 17pt; }
.trl-receipt__contacts .trl-sheet__contact img { width: 17pt; height: 17pt; }
@media print { .trl-sheet-frame > .trl-receipt { transform: none !important; } }

/* Skewed button — the site's "Acessar Blog ↗": a green parallelogram leaning toward quadrant 1 */
.trl-btn--skew { background: var(--brand); color: var(--on-brand); border: 0; border-radius: 0; padding: 12px 34px; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); text-decoration: none; }
.trl-btn--skew:hover { background: var(--green-mid); }
.trl-btn--skew:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; clip-path: none; }
.trl-btn__arrow { width: 16px; height: 16px; flex: none; transition: transform var(--motion-instant, 100ms) var(--ease-rise, cubic-bezier(0.16, 1, 0.3, 1)); }

/* Shape — the imperfect shapes, the skewed frame and the rule (site 2021) */
.trl-shape { display: block; flex: none; overflow: visible; }

/* Tab — the losango hanging from the top edge, holding the T; it takes the page's category colour */
.trl-tab { position: relative; display: inline-block; overflow: hidden; flex: none; }
.trl-tab__diamond { position: absolute; left: 14.645%; top: -33.4%; width: 70.71%; height: 110.5%; background: var(--trl-tab, var(--green-light)); transform: rotate(45deg); border-radius: 0 0 6% 0; }
.trl-tab__t { position: absolute; left: 50%; top: 9%; transform: translateX(-50%); }

/* Stat — "+7 clientes": a Hammersmith One numeral with a gray-ink plus */
.trl-stat { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.trl-stat__value { font-family: var(--font-display); font-size: 88px; line-height: 0.9; color: var(--brand); }
.trl-stat__plus { color: var(--ink); margin-right: 2px; font-size: 0.8em; vertical-align: 0.06em; }
.trl-stat__label { font-family: var(--font-subtitle); font-weight: 600; font-size: 24px; line-height: 32px; color: var(--ink); }

/* Nascente: the bands travel with transform only; the frame clips them */
.trl-nascente { position: relative; overflow: hidden; flex: none; isolation: isolate; }
.trl-nascente__scene { position: absolute; left: 0; top: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.trl-nascente__bands { position: absolute; left: 0; top: 0; display: block; overflow: visible; pointer-events: none; }
.trl-nascente__window { position: absolute; left: 0; top: 0; }