@import url("../tokens.css");

.site-main.ty{
  position:relative;
  min-height:100vh;
  padding:0;
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
}

.site-main.ty::before{
  content:"";
  position:absolute;
  inset:0;
  background:transparent;
  pointer-events:none;
  opacity:0;
}

.site-main.ty::after{
  content:"";
  position:absolute;
  inset:0;
  background:transparent;
  pointer-events:none;
  opacity:0;
}

.ty{
  --ty-accent:var(--primary);
  --ty-accent-rgb:var(--primary-rgb);
  --ty-surface:var(--color-highlight-06);
  --ty-surface-2:rgba(var(--text-rgb),.035);
  --ty-border:rgba(var(--text-rgb),.12);
  --ty-muted:rgba(var(--text-rgb),.72);
  --ty-radius:22px;
  --ty-radius-sm:16px;
  --ty-shadow:0 18px 55px rgba(var(--color-shadow-rgb),.55);
}

.ty__wrap{
  min-height:100vh;
  padding:clamp(96px, 10vh, 140px) 16px 48px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:1;
}

.ty__card{
  width:min(980px, 100%);
  border-radius:var(--ty-radius);
  background:linear-gradient(180deg, var(--ty-surface), var(--ty-surface-2));
  border:1px solid var(--ty-border);
  box-shadow:var(--ty-shadow);
  overflow:hidden;
  backdrop-filter:blur(12px);
  display:grid;
  grid-template-columns:220px 1fr;
}

.ty__rail{
  padding:22px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-right:1px solid var(--color-highlight-08);
  background:radial-gradient(240px 240px at 50% 38%, rgba(var(--ty-accent-rgb), .14), transparent 65%),
    radial-gradient(280px 240px at 70% 75%, var(--color-highlight-06), transparent 70%);
}

.ty__ring{
  --size:112px;
  --thickness:10px;
  width:var(--size);
  height:var(--size);
  border-radius:999px;
  background:conic-gradient(var(--ty-accent) calc(var(--p, 0) * 1turn), var(--color-highlight-12) 0);
  padding:var(--thickness);
  box-shadow:0 14px 40px rgba(var(--color-shadow-rgb),.35);
}

.ty__ringInner{
  width:100%;
  height:100%;
  border-radius:inherit;
  background:rgba(var(--color-shadow-rgb),.32);
  border:1px solid var(--color-highlight-10);
  display:grid;
  place-items:center;
  gap:2px;
  text-align:center;
}

.ty__ringNum{
  font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
  font-weight:900;
  font-size:30px;
  line-height:1;
  color:var(--text);
}

.ty__ringLbl{
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(var(--text-rgb),.65);
}

.ty__content{
  padding:clamp(22px, 3.2vw, 36px);
  display:grid;
  gap:18px;
}

.ty__header{
  display:grid;
  gap:10px;
}

.ty__mark{
  width:48px;
  height:48px;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:var(--color-primary-contrast);
  background:radial-gradient(circle at 35% 30%, rgba(var(--ty-accent-rgb), 1) 0, rgba(var(--ty-accent-rgb), .62) 45%, var(--color-highlight-06) 100%);
  box-shadow:0 14px 40px rgba(var(--color-shadow-rgb),.35);
}

.ty__mark svg{
  width:22px;
  height:22px;
}

.ty__title{
  margin:0;
  font-family:var(--font-head, system-ui, sans-serif);
  letter-spacing:.01em;
  font-weight:900;
  line-height:1.05;
  font-size:clamp(26px, 2.6vw, 40px);
}

.ty__lead{
  margin:0;
  color:rgba(var(--text-rgb),.78);
  line-height:1.6;
  max-width:70ch;
  font-size:15.5px;
}

.ty__countdown{
  margin:0;
  color:rgba(var(--text-rgb),.62);
  font-size:14px;
}

.ty__countStrong{
  color:var(--text);
  font-weight:900;
}

.ty__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  align-items:start;
}

.ty__panel{
  border-radius:var(--ty-radius-sm);
  background:var(--color-highlight-04);
  border:1px solid var(--color-highlight-08);
  padding:16px 16px;
}

.ty__panel--help{
  background:rgba(var(--ty-accent-rgb), .07);
  border-color:rgba(var(--ty-accent-rgb), .16);
}

.ty__h{
  margin:0 0 10px;
  font-size:14px;
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.ty__steps{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:8px;
  color:rgba(var(--text-rgb),.82);
  line-height:1.5;
}

.ty__dl{
  margin:0;
  display:grid;
  gap:10px;
}

.ty__dlRow{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:10px;
  align-items:baseline;
}

.ty__dt{
  margin:0;
  color:rgba(var(--text-rgb),.62);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.ty__dd{
  margin:0;
  color:rgba(var(--text-rgb),.88);
  line-height:1.45;
}

.ty__link{
  color:var(--ty-accent);
  text-decoration:none;
  border-bottom:1px solid rgba(var(--ty-accent-rgb), .35);
}

.ty__link:hover{
  border-bottom-color:rgba(var(--ty-accent-rgb), .75);
}

.ty__helpText{
  margin:10px 0 0;
  color:rgba(var(--text-rgb),.76);
  line-height:1.55;
  font-size:14.5px;
}

.ty__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding-top:6px;
}

.ty__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:999px;
  padding:12px 18px;
  font-weight:900;
  letter-spacing:.02em;
  text-decoration:none;
  border:1px solid rgba(var(--text-rgb),.14);
  background:var(--color-highlight-03);
  color:var(--text);
  transition:transform var(--anim-fast, 150ms) var(--ease-out, cubic-bezier(.18,.78,.22,1)),
              background-color var(--anim-fast, 150ms) var(--ease-out, cubic-bezier(.18,.78,.22,1)),
              border-color var(--anim-fast, 150ms) var(--ease-out, cubic-bezier(.18,.78,.22,1)),
              filter var(--anim-fast, 150ms) var(--ease-out, cubic-bezier(.18,.78,.22,1));
}

.ty__btn:hover{
  transform:translateY(-1px);
  border-color:rgba(var(--ty-accent-rgb), .35);
}

.ty__btn:active{
  transform:translateY(0);
}

.ty__btn:focus-visible{
  outline:0;
  box-shadow:0 0 0 4px rgba(var(--ty-accent-rgb), .18);
  border-color:rgba(var(--ty-accent-rgb), .55);
}

.ty__btn--primary{
  border-color:rgba(var(--ty-accent-rgb), .25);
  background:linear-gradient(180deg, rgba(var(--ty-accent-rgb), 1), rgba(var(--ty-accent-rgb), .65));
  color:var(--color-primary-contrast);
  box-shadow:0 16px 50px rgba(var(--color-shadow-rgb),.35);
}

.ty__btn--primary:hover{
  filter:brightness(1.03);
}

.ty__btn--ghost{
  background:rgba(var(--text-rgb),.035);
}

.ty__fineprint{
  margin:0;
  font-size:12.5px;
  color:rgba(var(--text-rgb),.58);
}

.ty__text{
  margin:0;
  font-size:14px;
  color:rgba(var(--text-rgb),.78);
  line-height:1.55;
}

.ty__noscript{
  margin:12px 0 0;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--color-highlight-10);
  background:rgba(var(--color-shadow-rgb),.22);
  color:rgba(var(--text-rgb),.78);
}

@media (max-width: 860px){
  .ty__card{
    grid-template-columns:1fr;
  }

  .ty__rail{
    border-right:0;
    border-bottom:1px solid var(--color-highlight-08);
    padding:18px 18px;
  }

  .ty__grid{
    grid-template-columns:1fr;
  }
}

@media (prefers-reduced-motion: reduce){
  .ty__btn{
    transition:none !important;
  }
}