/* Do by Businlog: Security, Help centre and Contact pages (D5). Light only.
   Builds on site.css tokens and brand.css (ui-*). Every class here is prefixed "tr-". No layout outside these pages. */

/* ---------- shared hero ---------- */
.tr-hero { position: relative; isolation: isolate; padding: clamp(36px, 6vw, 88px) 0 clamp(40px, 6vw, 80px); }
.tr-hero::before {
  content: ""; position: absolute; inset: -10% 0 auto; height: 680px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(34% 46% at 14% 30%, rgba(255, 176, 32, .26), transparent 70%),
    radial-gradient(30% 42% at 86% 18%, rgba(63, 168, 255, .20), transparent 70%),
    radial-gradient(28% 40% at 52% 8%, rgba(255, 77, 141, .14), transparent 70%),
    radial-gradient(30% 40% at 70% 70%, rgba(18, 184, 134, .12), transparent 70%);
}
.tr-hero h1 { font-size: var(--ui-fs-h1, clamp(2.15rem, 1.35rem + 3.5vw, 4rem)); letter-spacing: -.04em; margin: 0 0 18px; }
.tr-hero .lead { margin: 0 0 28px; }
.tr-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 960px) { .tr-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.tr-hero-center { text-align: center; max-width: 50rem; margin: 0 auto; }
.tr-hero-center .lead { margin-left: auto; margin-right: auto; }

.tr-facts { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.tr-facts li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--ui-shadow-1, var(--shadow-sm)); font-size: .88rem; font-weight: 550; color: var(--ink-2); }
.tr-facts svg { color: var(--ui-mint-ink, #04694a); flex: none; }

.tr-anchor { scroll-margin-top: calc(var(--head-h) + 24px); }
.tr-wrap-mid { max-width: calc(1040px + var(--gutter) * 2); }

/* ---------- security: "two workspaces, nothing shared" diagram ---------- */
.tr-sep { margin: 0; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--ui-r-lg, 22px); box-shadow: var(--ui-shadow-3, var(--shadow-lg)); padding: clamp(16px, 3vw, 28px); }
.tr-sep-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.tr-sep-head b { font: 650 .95rem/1.3 var(--f-display); color: var(--ink); }
.tr-lanes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(10px, 2vw, 18px); }
.tr-lane { --c: #5b3df5; --soft: #efecff; position: relative; display: grid; gap: 26px; padding: 14px 10px; border-radius: 18px; background: linear-gradient(180deg, var(--soft), rgba(255, 255, 255, .6)); border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); min-width: 0; }
.tr-lane.b { --c: #e05a00; --soft: #fff0dc; }
.tr-lane-name { text-align: center; font: 650 .74rem/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 -12px; }
.tr-wire { position: absolute; left: calc(50% - 1px); top: 64px; bottom: 44px; width: 2px; border-radius: 2px; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--c) 45%, transparent) 0 6px, transparent 6px 11px); pointer-events: none; }
.tr-wire i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.tr-wire i::before { content: ""; position: absolute; left: -4px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  /* One run per lane, not a loop: the dot travels down once and fades out at the database, leaving the same
     resting state as reduced motion (no dot). `both` keeps lane b's dot hidden during its delay. */
  .tr-wire i { animation: tr-travel 3.6s cubic-bezier(.45, .05, .35, 1) 1 both; }
  .tr-lane.b .tr-wire i { animation-delay: 1.8s; }
  .tr-wire i::before { animation: tr-blink 3.6s linear 1 both; animation-delay: inherit; }
  @keyframes tr-travel { 0% { transform: translateY(0); } 100% { transform: translateY(100%); } }
  @keyframes tr-blink { 0% { opacity: 0; } 12% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; } }
}
.tr-node { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; text-align: center; padding: 12px 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--ui-shadow-1, var(--shadow-sm)); min-width: 0; }
.tr-node svg { color: var(--c); }
.tr-node b { font-size: .86rem; font-weight: 650; color: var(--ink); line-height: 1.25; overflow-wrap: break-word; min-width: 0; max-width: 100%; }
.tr-node small { font-size: .76rem; color: var(--ink-3); line-height: 1.35; }
.tr-sep-foot { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--ui-mint-soft, #e3f7ef); color: var(--ui-mint-ink, #04694a); font-size: .88rem; line-height: 1.5; }
.tr-sep-foot svg { flex: none; margin-top: 1px; }
@media (max-width: 420px) {
  .tr-node small { display: none; }
  .tr-node b { font-size: .8rem; }
  .tr-lane { padding: 12px 6px; gap: 22px; }
}

/* ---------- security: stat band ---------- */
.tr-stats { margin-top: clamp(8px, 2vw, 16px); }
@media (min-width: 960px) {
  .tr-stats.ui-stats--band { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tr-stats.ui-stats--band > .ui-stat { border-top: 0; border-right: 1px solid var(--line); }
  .tr-stats.ui-stats--band > .ui-stat:last-child { border-right: 0; }
}

/* ---------- security: pillars with a sticky index ---------- */
.tr-pillars { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (min-width: 960px) { .tr-pillars { grid-template-columns: 250px minmax(0, 1fr); } }
.tr-index { display: none; }
@media (min-width: 960px) {
  .tr-index { display: block; position: sticky; top: calc(var(--head-h) + 28px); }
}
.tr-index p { font: 650 .74rem/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.tr-index ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; border-left: 2px solid var(--line); }
.tr-index a { display: flex; gap: 10px; align-items: baseline; padding: 9px 12px; margin-left: -2px; border-left: 2px solid transparent; color: var(--ink-2); text-decoration: none; font-weight: 550; font-size: .94rem; line-height: 1.35; border-radius: 0 10px 10px 0; transition: color .2s, background-color .2s, border-color .2s; }
.tr-index a span { font: 650 .76rem/1 var(--f-display); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tr-index a:hover { color: var(--ink); background: var(--surface); }
.tr-index a.is-on, .tr-index a[aria-current="true"] { color: var(--ink); border-left-color: #e8457f; background: linear-gradient(90deg, #fff0dc, transparent); }
.tr-index a.is-on span { color: #a8124c; }
.tr-pillar-list { display: grid; gap: clamp(16px, 2.4vw, 24px); }
.tr-pillar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 22px; padding: clamp(22px, 3.4vw, 36px); scroll-margin-top: calc(var(--head-h) + 24px); }
@media (min-width: 640px) { .tr-pillar { grid-template-columns: auto minmax(0, 1fr); } }
.tr-pillar h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); margin: 4px 0 8px; letter-spacing: -.02em; }
.tr-pillar > div > p { color: var(--ink-2); margin: 0 0 18px; line-height: 1.6; }
.tr-pillar .ui-checks { margin: 0; }
.tr-pillar-n { font: 650 .72rem/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ui-kicker, #c2410c); }

/* ---------- security: what we do / what you control ---------- */
.tr-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ui-gap, 20px); }
@media (min-width: 860px) { .tr-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.tr-duo-card { padding: clamp(22px, 3.4vw, 36px); }
.tr-duo-card header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.tr-duo-card header h3 { margin: 0; font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); }
.tr-duo-card header p { margin: 2px 0 0; color: var(--ink-3); font-size: .9rem; }
.tr-duo-card .ui-checks { margin: 0; }

/* ---------- security: admin checklist (interactive) ---------- */
.tr-check { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (min-width: 960px) { .tr-check { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.tr-check-intro .ui-h2 { margin-bottom: 12px; }
.tr-meter { margin-top: 22px; padding: 18px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--ui-shadow-1, var(--shadow-sm)); }
.tr-meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 600; color: var(--ink); }
.tr-meter-top span:last-child { color: var(--ink-3); font-weight: 550; font-size: .9rem; font-variant-numeric: tabular-nums; }
.tr-bar { height: 10px; margin-top: 12px; border-radius: 999px; background: var(--bg-2); overflow: hidden; border: 1px solid var(--line); }
.tr-bar i { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: linear-gradient(90deg, #5b3df5, #e8457f 60%, #ffb020); transition: width .45s var(--ui-ease, ease); }
.tr-meter-msg { margin: 10px 0 0; color: var(--ink-2); font-size: .9rem; min-height: 1.5em; }
.tr-meter[data-done] .tr-meter-msg { color: var(--ui-mint-ink, #04694a); font-weight: 600; }
.tr-tasks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.tr-task { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--ui-shadow-1, var(--shadow-sm)); cursor: pointer; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.tr-task:hover { border-color: rgba(255, 138, 0, .4); }
.tr-task input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tr-box { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--line-2); background: var(--surface); display: grid; place-items: center; color: transparent; transition: background-color .2s, border-color .2s, transform .2s; }
.tr-box svg { width: 16px; height: 16px; }
.tr-task input:checked + .tr-box { background: var(--ui-mint, #12b886); border-color: var(--ui-mint, #12b886); color: #fff; }
.tr-task input:focus-visible + .tr-box { outline: 3px solid var(--focus); outline-offset: 2px; }
.tr-task:has(input:checked) { background: linear-gradient(160deg, #ecfaf4, #ffffff 70%); border-color: rgba(18, 184, 134, .32); }
.tr-task b { display: block; color: var(--ink); font-weight: 650; line-height: 1.35; margin-top: 2px; }
.tr-task span.t { display: block; color: var(--ink-2); font-size: .93rem; line-height: 1.55; margin-top: 4px; }
@media (prefers-reduced-motion: no-preference) { .tr-task input:checked + .tr-box { animation: tr-pop .35s var(--ui-ease, ease); } }
@keyframes tr-pop { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* ---------- security: report a problem ---------- */
.tr-report { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 28px; align-items: center; padding: clamp(24px, 4vw, 40px); }
@media (min-width: 760px) { .tr-report { grid-template-columns: auto minmax(0, 1fr) auto; } }
.tr-report h2 { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem); margin: 0 0 6px; }
.tr-report p { margin: 0; color: var(--ink-2); line-height: 1.6; }
.tr-report .ui-btn-row { justify-content: flex-start; }
.tr-mail { overflow-wrap: anywhere; }

/* ---------- FAQ (shared) ---------- */
.tr-faq .faq { max-width: none; margin: 0; }
.tr-faq-wrap { max-width: 860px; margin: 0 auto; }

/* ---------- help: search ---------- */
.tr-search { position: relative; max-width: 640px; margin: 30px auto 0; }
.tr-search-box { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 18px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--ui-shadow-2, var(--shadow)); transition: border-color .15s, box-shadow .15s; }
.tr-search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(106, 92, 255, .18), var(--ui-shadow-2, var(--shadow)); }
.tr-search-box > svg { flex: none; color: var(--ink-3); }
.tr-search-box input { flex: 1; min-width: 0; height: 48px; border: 0; background: transparent; color: var(--ink); font: 400 17px/1.3 var(--f-body); padding: 0 4px; outline: none; -webkit-appearance: none; appearance: none; }
.tr-search-box input::placeholder { color: var(--ink-3); opacity: 1; }
.tr-search-box input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.tr-search-clear { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--ink-2); cursor: pointer; }
.tr-search-clear:hover { color: var(--ink); background: var(--bg-2); }
.tr-search-box .btn { flex: none; }
@media (max-width: 480px) {
  .tr-search-box { padding-left: 14px; }
  .tr-search-box .btn { padding: 0 14px; }
  .tr-search-box .btn .tr-go-lbl { display: none; }
}
.tr-search-hint { margin: 12px 0 0; color: var(--ink-3); font-size: .86rem; }
.tr-popular { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.tr-popular li:first-child { color: var(--ink-3); font-size: .88rem; margin-right: 2px; }
.tr-popular a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .75); border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; font-size: .88rem; font-weight: 550; }
.tr-popular a:hover { color: var(--ink); border-color: rgba(255, 138, 0, .45); background: var(--surface); }

.tr-status { max-width: 640px; margin: 18px auto 0; min-height: 1.5em; color: var(--ink-2); font-size: .95rem; }
.tr-status b { color: var(--ink); }

/* ---------- help: topic cards ---------- */
.tr-topic-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 640px) { .tr-topic-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .tr-topic-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 1039px) { .tr-topic-cards > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.tr-tcard { position: relative; height: 100%; display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; padding: 20px; border-radius: var(--ui-r, 16px); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--ui-shadow-2, var(--shadow-sm)); transition: transform .25s var(--ui-ease, ease), border-color .2s, box-shadow .25s; }
.tr-tcard:hover { border-color: rgba(255, 138, 0, .4); box-shadow: var(--ui-shadow-3, var(--shadow)); }
@media (prefers-reduced-motion: no-preference) { .tr-tcard:hover { transform: translateY(-2px); } }
.tr-tcard:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.tr-tcard h3 { font-size: 1.04rem; margin: 8px 0 0; }
.tr-tcard a { color: var(--ink); text-decoration: none; }
.tr-tcard a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tr-tcard a:focus-visible { outline: none; }
.tr-tcard p { margin: 0; color: var(--ink-2); font-size: .9rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tr-tcard .tr-n { color: var(--ink-3); font-size: .82rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.tr-tcard .tr-n svg { transition: transform .25s var(--ui-ease, ease); }
@media (max-width: 639px) {
  .tr-tcard { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center; gap: 12px; padding: 12px 14px; }
  .tr-tcard h3 { margin: 0; font-size: 1rem; }
  .tr-tcard p { display: none; }
  .tr-topic-cards { gap: 8px; }
}
.tr-tcard:hover .tr-n svg { transform: translateX(3px); }

/* ---------- help: topics + accordions ---------- */
.tr-help { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (min-width: 960px) { .tr-help { grid-template-columns: 230px minmax(0, 1fr); } }
.tr-help-body { display: grid; gap: clamp(36px, 5vw, 56px); min-width: 0; }
.tr-topic { scroll-margin-top: calc(var(--head-h) + 20px); }
.tr-topic-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.tr-topic-head h2 { font-size: clamp(1.35rem, 1.15rem + .9vw, 1.8rem); margin: 2px 0 4px; }
.tr-topic-head p { margin: 0; color: var(--ink-2); line-height: 1.55; }
.tr-topic .faq { max-width: none; margin: 0; }
.tr-topic .faq details { scroll-margin-top: calc(var(--head-h) + 20px); }
.tr-topic .faq details:target, .tr-topic .faq details.is-target { border-color: rgba(255, 138, 0, .55); box-shadow: 0 0 0 4px rgba(255, 176, 32, .18); }
.tr-ans-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-2); font-size: .85rem; color: var(--ink-3); }
.tr-copy { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: 600 .82rem/1 var(--f-body); cursor: pointer; }
.tr-copy:hover { color: var(--ink); border-color: var(--line-2); }
.tr-copy[data-copied] { color: var(--ui-mint-ink, #04694a); border-color: rgba(18, 184, 134, .4); background: var(--ui-mint-soft, #e3f7ef); }
.tr-ans-tools a { color: var(--accent-ink); }
mark.tr-hit { background: #ffe7a8; color: inherit; border-radius: 3px; padding: 0 1px; box-shadow: 0 0 0 1px rgba(255, 176, 32, .35); }

.tr-empty { text-align: center; padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 40px); border-radius: var(--ui-r-lg, 22px); border: 1.5px dashed var(--line-2); background: var(--surface-2); }
.tr-empty .ui-ic { margin: 0 auto 14px; }
.tr-empty h2 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); margin: 0 0 8px; }
.tr-empty p { color: var(--ink-2); margin: 0 auto 20px; max-width: 34em; }
.tr-empty .ui-btn-row { justify-content: center; }

/* ---------- help: still stuck ---------- */
.tr-stuck { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ui-gap, 20px); }
@media (min-width: 760px) { .tr-stuck { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tr-stuck .ui-card { display: grid; gap: 10px; align-content: start; padding: 24px; }
.tr-stuck h3 { margin: 6px 0 0; font-size: 1.1rem; }
.tr-stuck p { margin: 0; color: var(--ink-2); font-size: .94rem; line-height: 1.55; }
.tr-stuck .ui-link-arrow { margin-top: 4px; overflow-wrap: anywhere; }

/* ---------- contact ---------- */
.tr-contact { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "form" "next"; gap: clamp(24px, 4vw, 40px) clamp(32px, 5vw, 72px); align-items: start; }
@media (min-width: 960px) {
  .tr-contact { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "intro form" "next form"; }
  .tr-c-form { position: sticky; top: calc(var(--head-h) + 20px); }
}
.tr-c-intro { grid-area: intro; min-width: 0; }
.tr-c-form { grid-area: form; min-width: 0; }
.tr-c-next { grid-area: next; min-width: 0; display: grid; gap: clamp(24px, 3vw, 32px); }
.tr-c-intro h1 { font-size: clamp(2.1rem, 1.35rem + 3vw, 3.5rem); letter-spacing: -.04em; margin: 0 0 16px; }
.tr-c-intro .lead { margin: 0; }

.tr-hello { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 26px; }
.tr-hello-av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--ui-shadow-2, var(--shadow-sm)); }
.tr-hello-av svg { width: 30px; height: 30px; filter: none; }
.tr-bubble { position: relative; padding: 16px 18px; border-radius: 4px 18px 18px 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--ui-shadow-2, var(--shadow-sm)); color: var(--ink-2); line-height: 1.6; font-size: .97rem; }
.tr-bubble p { margin: 0 0 8px; }
.tr-bubble p:last-of-type { margin-bottom: 0; }
.tr-bubble .who { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: .82rem; color: var(--ink-3); }
.tr-bubble .who b { color: var(--ink); font-size: .9rem; }
.tr-c-next h2 { font-size: 1.25rem; margin: 0 0 16px; }
.tr-ways { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.tr-ways li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.tr-ways li:hover { border-color: rgba(255, 138, 0, .4); box-shadow: var(--ui-shadow-2, var(--shadow-sm)); }
.tr-ways li:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.tr-ways .ui-ic { --ui-ic: 36px; }
.tr-ways a { color: var(--ink); font-weight: 650; text-decoration: none; overflow-wrap: anywhere; }
.tr-ways a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tr-ways a:focus-visible { outline: none; }
.tr-ways div > span { display: block; color: var(--ink-3); font-size: .88rem; line-height: 1.45; margin-top: 2px; }

.tr-form-panel { padding: clamp(20px, 3.6vw, 36px); border-radius: var(--ui-r-lg, 22px); }
.tr-form-panel > h2 { font-size: clamp(1.3rem, 1.15rem + .7vw, 1.6rem); margin: 0 0 6px; }
.tr-form-panel > .panel-sub { margin: 0 0 22px; color: var(--ink-2); }
.tr-sum { margin: 0 0 20px; }
.tr-form-panel .field { align-content: start; }
.tr-sum ul { margin: 6px 0 0; padding-left: 1.1em; }
.tr-sum li { margin: 2px 0; }
.tr-sum a { color: var(--bad-ink); font-weight: 600; }

.tr-pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 10px; }
@media (min-width: 480px) { .tr-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tr-opt { position: relative; display: block; cursor: pointer; min-width: 0; }
.tr-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tr-opt .box { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: center; height: 100%; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--surface); transition: border-color .15s, background-color .15s, box-shadow .15s; }
.tr-opt .ic { grid-row: span 2; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--bg-2); color: var(--ink-2); transition: background .2s, color .2s; }
.tr-opt .nm { font-weight: 650; color: var(--ink); font-size: .95rem; line-height: 1.3; }
.tr-opt .ds { color: var(--ink-3); font-size: .8rem; line-height: 1.4; }
.tr-opt:hover .box { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-2)); }
.tr-opt input:checked + .box { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); box-shadow: 0 0 0 3px rgba(106, 92, 255, .14); }
.tr-opt input:checked + .box .ic { background: linear-gradient(135deg, #5b3df5, #e8457f); color: #fff; }
.tr-opt input:focus-visible + .box { outline: 3px solid var(--focus); outline-offset: 2px; }
.tr-pick[aria-invalid="true"] .box, fieldset[aria-invalid="true"] .tr-opt .box { border-color: var(--bad); }

.field textarea { width: 100%; min-height: 150px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 400 16px/1.55 var(--f-body); resize: vertical; transition: border-color .15s, box-shadow .15s; }
.field textarea::placeholder { color: var(--ink-3); opacity: 1; }
.field textarea:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-2)); }
.field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(106, 92, 255, .2); }
.field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--bad); }
.field input[aria-invalid="true"]:focus, .field textarea[aria-invalid="true"]:focus, .field select[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(239, 68, 68, .18); }
.tr-err { display: flex; gap: 6px; align-items: flex-start; margin: 0; color: var(--bad-ink); font-size: .87rem; font-weight: 550; line-height: 1.4; }
.tr-err svg { flex: none; margin-top: 1px; }
.tr-err:empty { display: none; }
.tr-meta { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.tr-meta label { font-weight: 600; font-size: .92rem; color: var(--ink); }
.tr-count { color: var(--ink-3); font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; margin: 0; }
.tr-count.is-near { color: var(--warn-ink); }
.tr-count.is-over { color: var(--bad-ink); font-weight: 650; }
.tr-fine { margin: 0; color: var(--ink-3); font-size: .85rem; line-height: 1.5; text-align: center; }
.tr-send .tr-spin { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; }
.tr-send[aria-disabled="true"] .tr-spin { display: inline-block; }
.tr-send[aria-disabled="true"] .tr-arrow { display: none; }
@media (prefers-reduced-motion: no-preference) { .tr-send .tr-spin { animation: tr-rot .8s linear infinite; } }
@keyframes tr-rot { to { transform: rotate(360deg); } }

/* sent */
.tr-sent { text-align: center; padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 40px); }
.tr-sent:focus { outline: none; }
.tr-tick { width: 76px; height: 76px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #12b886, #0ea5a4); box-shadow: 0 0 0 10px var(--ui-mint-soft, #e3f7ef), 0 18px 36px -14px rgba(14, 165, 164, .7); }
.tr-tick svg { width: 38px; height: 38px; }
@media (prefers-reduced-motion: no-preference) {
  .tr-tick { animation: tr-pop .6s var(--ui-ease, ease) both; }
  .tr-tick path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: tr-draw .5s .25s ease forwards; }
  @keyframes tr-draw { to { stroke-dashoffset: 0; } }
}
.tr-sent h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); margin: 0 0 10px; }
.tr-sent p { color: var(--ink-2); margin: 0 auto 10px; max-width: 30em; line-height: 1.6; }
.tr-sent .tr-email { color: var(--ink); font-weight: 650; overflow-wrap: anywhere; }
.tr-sent .ui-btn-row { justify-content: center; margin-top: 24px; }
.tr-sent-list { text-align: left; max-width: 26rem; margin: 26px auto 0; padding: 18px 20px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.tr-sent-list > b { display: block; margin-bottom: 10px; color: var(--ink); font-size: .95rem; }
.tr-sent-list .ui-checks { margin: 0; font-size: .92rem; }

/* section spacing helpers for these pages */
.tr-sec-top { padding-top: clamp(16px, 3vw, 32px); }
.tr-cta-wrap { padding-bottom: clamp(56px, 8vw, 104px); }