/* Triconna site shell: turns the fixed-width design frames into full-width pages. */
html,body{margin:0;background:#FCFFFC!important}
html{overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{min-height:100vh}

/* one frame visible at a time: desktop or mobile, and the current view */
.tri-view{display:none}
.tri-view>*{
  width:var(--tri-w,100%)!important;
  zoom:var(--tri-z,1);
  border:0!important;border-radius:0!important;box-shadow:none!important;
}
@media (min-width:900px){.tri-d{display:block}}
@media (max-width:899.98px){
  html:not([data-tri-nomobile]) .tri-m{display:block}
  html[data-tri-nomobile] .tri-d{display:block}
}
html[data-view="main"] .tri-view:not([data-view="main"]),
html[data-view="detail"] .tri-view:not([data-view="detail"]),
html[data-view="article"] .tri-view:not([data-view="article"]){display:none!important}

/* links and buttons wired by site.js */
[data-tri-href]{cursor:pointer}
[data-tri-menu]{cursor:pointer;padding:12px 0 12px 8px;margin:-12px 0}
a:focus-visible,button:focus-visible,[data-tri-menu]:focus-visible{outline:2px solid #008C38;outline-offset:3px}

/* mobile menu */
.tri-menu{position:fixed;inset:0;z-index:1000;background:#001F10;color:#FCFFFC;display:none;flex-direction:column;
  padding:20px 24px 28px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;overflow-y:auto;-webkit-font-smoothing:antialiased}
.tri-menu.is-open{display:flex}
.tri-menu-top{display:flex;align-items:center;justify-content:space-between;height:40px;margin-bottom:28px}
.tri-menu-top img{height:26px;width:auto;display:block}
.tri-menu-close{appearance:none;background:none;border:0;color:#FCFFFC;font-size:26px;line-height:1;padding:8px;margin:-8px;cursor:pointer}
.tri-menu-label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#8FEB0F;font-weight:500;margin-bottom:8px}
.tri-menu nav{display:flex;flex-direction:column}
.tri-menu nav a{color:#FCFFFC;text-decoration:none;font-size:28px;line-height:1.1;letter-spacing:-.02em;font-weight:500;
  padding:16px 0;border-bottom:1px solid rgba(252,255,252,.16)}
.tri-menu nav a[aria-current="page"]{color:#8FEB0F}
.tri-menu-cta{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.tri-menu-cta a{display:flex;align-items:center;justify-content:center;height:52px;border-radius:999px;text-decoration:none;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.tri-menu-cta .is-primary{background:#008C38;color:#FCFFFC}
.tri-menu-cta .is-ghost{border:1px solid rgba(252,255,252,.45);color:#FCFFFC}
.tri-menu-foot{margin-top:auto;padding-top:28px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(252,255,252,.55);display:flex;gap:20px;flex-wrap:wrap}
.tri-menu-foot a{color:inherit;text-decoration:none}
html.tri-menu-open,html.tri-menu-open body{overflow:hidden}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* phone layout for pages that only have a desktop frame (make-payment) */
@media (max-width:899.98px){
html[data-tri-nomobile] .tf-pad{padding-left:20px!important;padding-right:20px!important}
html[data-tri-nomobile] .tf-pad2{padding:24px 20px!important}
html[data-tri-nomobile] .tf-stack{grid-template-columns:1fr!important;gap:20px!important}
html[data-tri-nomobile] .tf-pad.tf-stack{gap:32px!important;padding-top:32px!important;padding-bottom:56px!important}
html[data-tri-nomobile] .tf-g4{grid-template-columns:repeat(4,1fr)!important}
html[data-tri-nomobile] .tf-steps{display:flex!important;overflow-x:auto;gap:14px!important;scrollbar-width:none;margin:0 -20px;padding:0 20px}
html[data-tri-nomobile] .tf-steps::-webkit-scrollbar{display:none}
html[data-tri-nomobile] .tf-steps>*{flex:0 0 108px}
html[data-tri-nomobile] .tf-h{font-size:clamp(30px,9vw,40px)!important;line-height:1!important}
html[data-tri-nomobile] .tf-row{flex-wrap:wrap!important;gap:16px!important}
html[data-tri-nomobile] .tf-header{height:56px!important}
html[data-tri-nomobile] .tf-header>img{height:26px!important}
html[data-tri-nomobile] .tf-header>.tf-nav,
html[data-tri-nomobile] .tf-header>.tf-nav+div{display:none!important}
html[data-tri-nomobile] .tf-burger{display:flex!important}
html[data-tri-nomobile] .tri-view input,
html[data-tri-nomobile] .tri-view select,
html[data-tri-nomobile] .tri-view textarea{font-size:16px!important;max-width:100%;box-sizing:border-box}
}

/* phone action bar stays on screen */
@media (max-width:899.98px){.tri-bar{position:fixed!important;z-index:50;box-shadow:0 -6px 20px rgba(0,31,16,.08)}}
