/* TIPPER PORTAL L.L.C — company site */
:root{
  --c-ink:#141B33;
  --c-ink-soft:#5A6385;
  --c-cobalt:#2E46F0;
  --c-cobalt-hover:#2236D2;
  --c-yellow:#FFC93C;
  --c-paper:#FBFCFE;
  --c-cloud:#EDF0F8;
  --c-hair:#D9DEEB;
  --f-display:"Bricolage Grotesque",Georgia,serif;
  --f-copy:"Figtree",system-ui,sans-serif;
  --w-page:1040px;
  --gap-side:clamp(20px,5.5vw,48px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--c-paper);color:var(--c-ink);font:400 1.0625rem/1.6 var(--f-copy);overflow-x:hidden}
img,svg{display:block;max-width:100%;height:auto}
a{color:var(--c-cobalt)}
a:hover{color:var(--c-cobalt-hover)}
:focus-visible{outline:3px solid var(--c-yellow);outline-offset:3px;box-shadow:0 0 0 6px var(--c-ink)}
.tx-frame{max-width:var(--w-page);margin:0 auto;padding:0 var(--gap-side)}
.tx-skiplink{position:absolute;top:0;left:50%;transform:translate(-50%,-120%);z-index:90;background:var(--c-yellow);color:var(--c-ink);font-weight:600;padding:10px 20px;border-radius:0 0 12px 12px;text-decoration:none}
.tx-skiplink:focus{transform:translate(-50%,0)}

/* bar */
.tx-bar{border-bottom:3px solid var(--c-ink);background:var(--c-paper)}
.tx-bar-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0;flex-wrap:wrap}
.tx-logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--c-ink)}
.tx-logo img{width:36px;height:36px}
.tx-logo span{font:700 1.05rem/1.1 var(--f-display);letter-spacing:.06em;text-transform:uppercase}
.tx-nav ul{display:flex;flex-wrap:wrap;gap:6px 26px;list-style:none;margin:0;padding:0}
.tx-nav a{color:var(--c-ink);text-decoration:none;font-weight:500;border-bottom:2px solid transparent;padding:4px 0}
.tx-nav a:hover,.tx-nav a[aria-current="page"]{border-bottom-color:var(--c-yellow)}

/* intro */
.tx-intro{padding:clamp(48px,9vw,110px) 0 clamp(52px,8vw,96px)}
.tx-intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,6vw,80px);align-items:center}
.tx-place{margin:0 0 18px;font-size:.92rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink-soft)}
.tx-intro h1{font:700 clamp(2.3rem,6.2vw,4.4rem)/.98 var(--f-display);letter-spacing:-.035em;margin:0 0 24px}
.tx-intro h1 small{display:block;font-size:.42em;letter-spacing:.02em;color:var(--c-cobalt);margin-top:10px}
.tx-lead{font-size:clamp(1.1rem,1.7vw,1.28rem);color:var(--c-ink-soft);max-width:44ch;margin:0 0 30px}
.tx-btns{display:flex;flex-wrap:wrap;gap:12px}
.tx-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;font:600 1rem/1 var(--f-copy);text-decoration:none;border-radius:8px;border:2px solid var(--c-ink);background:var(--c-ink);color:#fff}
.tx-btn:hover{background:var(--c-cobalt);border-color:var(--c-cobalt);color:#fff}
.tx-btn-alt{background:transparent;color:var(--c-ink)}
.tx-btn-alt:hover{background:var(--c-yellow);border-color:var(--c-ink);color:var(--c-ink)}

/* business card visual */
.tx-bcard{position:relative;justify-self:center;width:min(400px,100%);aspect-ratio:1.75/1;background:var(--c-ink);color:#fff;border-radius:14px;padding:clamp(18px,4vw,28px);display:flex;flex-direction:column;justify-content:space-between;transform:rotate(-3deg);box-shadow:-14px 14px 0 var(--c-yellow)}
.tx-bcard::after{content:"";position:absolute;top:0;right:0;width:22%;height:100%;background:var(--c-cobalt);border-radius:0 14px 14px 0}
.tx-bcard > *{position:relative;z-index:1;max-width:76%}
.tx-bcard b{font:700 clamp(1rem,2.4vw,1.25rem)/1.15 var(--f-display);letter-spacing:.03em}
.tx-bcard span{display:block;font-size:clamp(.72rem,1.6vw,.84rem);line-height:1.45;color:#CFD5E8}
.tx-bcard em{font-style:normal;color:var(--c-yellow);font-weight:600}

/* sections */
.tx-part{padding:clamp(56px,8vw,96px) 0;border-top:1px solid var(--c-hair)}
.tx-part-cloud{background:var(--c-cloud)}
.tx-label{display:flex;align-items:baseline;gap:14px;margin:0 0 28px}
.tx-label i{font:700 .95rem/1 var(--f-copy);font-style:normal;color:var(--c-ink);background:var(--c-yellow);padding:6px 9px;border-radius:6px}
.tx-label h2{font:700 clamp(1.75rem,3.6vw,2.5rem)/1.1 var(--f-display);letter-spacing:-.025em;margin:0}
.tx-text{max-width:62ch;color:var(--c-ink-soft);font-size:1.12rem;margin:0 0 14px}

/* app row */
.tx-app{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,3.5vw,34px);align-items:center;background:#fff;border:2px solid var(--c-ink);border-radius:18px;padding:clamp(20px,3.5vw,32px)}
.tx-app-icon{width:76px;height:76px;border-radius:18px;background:var(--c-cobalt);display:grid;place-items:center}
.tx-app-icon svg{width:40px;height:40px}
.tx-app h3{font:700 1.5rem/1.15 var(--f-display);margin:0 0 6px}
.tx-app p{margin:0 0 10px;color:var(--c-ink-soft)}
.tx-app-docs{display:flex;flex-wrap:wrap;gap:4px 18px;list-style:none;margin:0;padding:0;font-size:.95rem}

/* contacts */
.tx-reach{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:2px solid var(--c-ink);border-radius:18px;overflow:hidden;background:#fff;margin:0}
.tx-reach > div{padding:clamp(20px,3vw,30px);border-left:2px solid var(--c-ink)}
.tx-reach > div:first-child{border-left:0}
.tx-reach dt{font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink-soft);margin:0 0 8px}
.tx-reach dd{margin:0;font-weight:500}
.tx-reach a{word-break:break-word}

/* questions */
.tx-ask{max-width:780px}
.tx-ask details{border-bottom:2px solid var(--c-ink)}
.tx-ask details:first-child{border-top:2px solid var(--c-ink)}
.tx-ask summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;font:600 1.15rem/1.35 var(--f-display)}
.tx-ask summary::-webkit-details-marker{display:none}
.tx-ask summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:3px solid var(--c-cobalt);border-bottom:3px solid var(--c-cobalt);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.tx-ask details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.tx-ask details p{margin:0 0 20px;color:var(--c-ink-soft)}

/* documents */
.tx-paper{padding:clamp(40px,7vw,80px) 0 clamp(56px,8vw,96px)}
.tx-paper-body{max-width:720px}
.tx-paper h1{font:700 clamp(2rem,5vw,3.1rem)/1.05 var(--f-display);letter-spacing:-.03em;margin:0 0 12px}
.tx-date{display:inline-block;margin:0 0 30px;padding:4px 10px;border-left:4px solid var(--c-yellow);background:var(--c-cloud);font-size:.95rem;color:var(--c-ink-soft)}
.tx-paper h2{font:700 1.25rem/1.3 var(--f-display);color:var(--c-cobalt);margin:34px 0 8px}
.tx-paper p,.tx-paper li{color:#2B3350}
.tx-paper ul{padding-left:1.2em}

/* 404 */
.tx-missing{padding:clamp(64px,11vw,130px) 0}
.tx-missing-code{font:700 clamp(4rem,14vw,9rem)/.9 var(--f-display);letter-spacing:-.05em;color:var(--c-cobalt);margin:0;-webkit-text-stroke:0}
.tx-missing h1{font:700 clamp(1.8rem,4.5vw,2.8rem)/1.1 var(--f-display);margin:14px 0 12px}
.tx-missing p{color:var(--c-ink-soft);max-width:46ch;margin:0 0 28px}

/* footer */
.tx-end{background:var(--c-ink);color:#C6CCE0;padding:34px 0;font-size:.95rem}
.tx-end-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 28px}
.tx-end p{margin:0}
.tx-end ul{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin:0;padding:0}
.tx-end a,.tx-end button{color:#fff;text-decoration:none;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.tx-end a:hover,.tx-end button:hover{color:var(--c-yellow);text-decoration:underline}

/* cookies */
.tx-cookies{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:80;width:min(680px,calc(100% - 28px));background:#fff;color:var(--c-ink);border:2px solid var(--c-ink);border-radius:14px;padding:16px 18px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;box-shadow:0 10px 0 var(--c-ink)}
.tx-cookies[hidden]{display:none}
.tx-cookies p{margin:0;flex:1 1 280px;font-size:.95rem;color:var(--c-ink-soft)}
.tx-cookies p strong{color:var(--c-ink)}
.tx-cookies .tx-btn{min-height:42px;padding:0 16px;font-size:.95rem}

@media (max-width:860px){
  .tx-intro-grid{grid-template-columns:1fr}
  .tx-bcard{margin-top:12px}
  .tx-app{grid-template-columns:auto 1fr}
  .tx-app > .tx-btn{grid-column:1 / -1;justify-self:start}
  .tx-reach{grid-template-columns:1fr}
  .tx-reach > div{border-left:0;border-top:2px solid var(--c-ink)}
  .tx-reach > div:first-child{border-top:0}
}
@media (max-width:520px){
  .tx-app{grid-template-columns:1fr}
  .tx-bcard{transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}
