/* Try page. app.css gives the invoice styles and the Onest font; this file is the page around it. */
body.tryp{background:var(--uibg);color:#fff;font-family:"Onest","Segoe UI",Arial,sans-serif;font-size:15px;line-height:1.5}
.tryp a{color:inherit}
.tbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(22,22,22,.62);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid rgba(255,255,255,.08)}
.tin,.tmain{max-width:1240px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.tin{display:flex;justify-content:space-between;align-items:center;height:72px}
.tlogo{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:21px;letter-spacing:-.035em;text-decoration:none}
.tmark{width:30px;height:30px;border-radius:7px;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.tbuy{font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:10px 16px}
.tbuy:hover{background:#fff;color:#151515}
.tmain{padding-block:36px 64px;display:grid;gap:28px}
.thead{display:grid;gap:10px;max-width:680px}
.thead h1{margin:0;font-weight:500;font-size:clamp(32px,4.6vw,56px);line-height:1;letter-spacing:-.035em}
.thead p{margin:0;color:#c9ccd6}
.tgrid{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:24px;align-items:start}
.tform{background:#fff;color:#151515;border-radius:15px;padding:8px 20px 22px;display:grid;gap:4px;position:sticky;top:90px}
.tform fieldset{border:0;margin:0;padding:12px 0 4px;border-bottom:1px solid #eceef4}
.tform legend{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ui);font-weight:600;padding:0;margin-bottom:2px}
.tform label{display:block;font-size:12px;color:#5d6270;margin:8px 0 3px}
.tform input,.tform select{width:100%;font:inherit;font-size:15px;padding:8px 10px;border:1px solid #c9c9ce;border-radius:8px;background:#fff;color:#151515}
.tform input:focus,.tform select:focus{outline:2px solid var(--ui);outline-offset:1px;border-color:var(--ui)}
.tform input[type=color]{height:40px;padding:3px;cursor:pointer}
.trow{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:10px}
.thint{margin:6px 0 4px;font-size:12px;color:#5d6270}
.tcta{display:grid;gap:12px;padding-top:16px}
.tcta p{margin:0;font-size:13.5px;color:#3a3e48}
.tbtn{display:inline-block;justify-self:start;background:var(--ui);color:#fff!important;text-decoration:none;font-weight:600;font-size:13px;letter-spacing:.03em;text-transform:uppercase;padding:15px 24px;border-radius:6px;position:relative;overflow:hidden;isolation:isolate}
.tbtn::after{content:"";position:absolute;top:0;left:-100%;width:200%;height:350%;background:rgba(255,255,255,.8);border-radius:100%;transform:scale(0);animation:shine 6s linear infinite;pointer-events:none}
@media (prefers-reduced-motion:reduce){.tbtn::after{animation:none;display:none}}
.tview{min-width:0;display:flex;justify-content:center}
.tstage{position:relative;width:210mm}
.tstage .page{box-shadow:0 20px 60px rgba(0,0,0,.45);color:var(--ink)}
.tsample{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) rotate(-28deg);font:800 120px/1 "Onest",Arial,sans-serif;letter-spacing:.06em;color:rgba(9,29,150,.09);pointer-events:none;user-select:none;white-space:nowrap}
.tfoot{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;padding:30px 20px;background:var(--uibar);color:#a3a3a3;font-size:13px}
.tfoot a{text-decoration:none}.tfoot a:hover{color:#fff}
@media (max-width:860px){
  .tgrid{grid-template-columns:minmax(0,1fr)}
  .tform{position:static}
}