/* Visual language of the original Figma entwurf by Tania Varik.
   Colours sampled pixel-exact from the source screenshots. */

:root {
  --t-bg:      #2D5E7F;
  --t-card:    #386F96;
  --t-card-hi: #457DA5;
  --t-red:     #D45D47;
  --t-green:   #54A17F;
  --t-yellow:  #E9B655;
  --t-muted:   #ABC3D2;
}

.screen.t { background: var(--t-bg); color: #fff; }
.screen.t .statusbar { color: #fff; }

.t .body { padding: 0 22px 26px; }

.t h2, .t h3 { color: #fff; }

.t .apptitle {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 27px;
  letter-spacing: -.005em;
  margin: 4px 0 2px;
  color: #fff;
}

.t .appsub {
  font-size: 15px;
  color: rgba(255,255,255,.86);
  margin: 0 0 22px;
}

/* the three big choice cards */
.t .tcard {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 14px;
  margin-bottom: 13px;
  border: 0;
  border-radius: 14px;
  background: var(--t-card);
  cursor: pointer;
  font: inherit;
  color: #fff;
  transition: background .15s, transform .15s;
}
.t .tcard:hover { background: var(--t-card-hi); }
.t .tcard:active { transform: scale(.99); }

.t .tcard .sq {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 10px;
  display: grid; place-items: center;
  color: rgba(255,255,255,.95);
}
.t .tcard .sq svg { width: 25px; height: 25px; }
.t .tcard .sq.red    { background: var(--t-red); }
.t .tcard .sq.green  { background: var(--t-green); }
.t .tcard .sq.yellow { background: var(--t-yellow); color: rgba(0,0,0,.62); }

.t .tcard .tx { flex: 1 1 auto; min-width: 0; }
.t .tcard .tx b { display: block; font-size: 17px; font-weight: 700; line-height: 1.25; }
.t .tcard .tx span { display: block; font-size: 13px; color: rgba(255,255,255,.74); line-height: 1.35; margin-top: 1px; }

/* footer block on the home screen */
.t .foot { margin-top: auto; padding-top: 26px; }

.t .eyebrow-t {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t-muted);
  margin: 0 0 9px;
}

.t .fineprint {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,.7);
  margin: 0;
}

/* splash */
.t.splash .body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 26px 34px;
}
.t.splash .wordmark {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1;
  margin: 0;
  color: #fff;
}
.t.splash .tagline {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  margin: 12px 0 0;
}
.t.splash .spacer { flex: 1 1 auto; }
.t.splash .startbtn {
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: var(--r-pill);
  background: #fff;
  color: #16323F;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s, background .15s;
}
.t.splash .startbtn:hover { background: #EFF4F7; }
.t.splash .startbtn:active { transform: scale(.985); }
.t.splash .promise {
  font-size: 13px;
  color: rgba(255,255,255,.82);
  margin: 14px 0 0;
}

/* inner screens */
.t .backbar {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 22px 12px;
  flex: 0 0 auto;
}
.t .backbar button {
  width: 38px; height: 38px;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
}
.t .backbar button:hover { background: rgba(255,255,255,.24); }
.t .backbar button svg { width: 19px; height: 19px; }
.t .backbar h2 { font-size: 21px; font-weight: 700; margin: 0; letter-spacing: -.005em; }

.t .lead { font-size: 15px; color: rgba(255,255,255,.85); margin: 0 0 20px; line-height: 1.5; }

/* option rows */
.t .opt {
  display: flex; align-items: center; gap: 13px;
  width: 100%; text-align: left;
  padding: 15px 14px;
  margin-bottom: 11px;
  border: 1.5px solid rgba(255,255,255,.22);
  border-radius: 13px;
  background: rgba(255,255,255,.06);
  color: #fff; font: inherit; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.t .opt:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.42); }
.t .opt b { display: block; font-size: 16px; font-weight: 600; }
.t .opt span { display: block; font-size: 12.5px; color: rgba(255,255,255,.72); margin-top: 1px; }
.t .opt .dotcol { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.t .opt .dotcol.g { background: var(--t-green); }
.t .opt .dotcol.y { background: var(--t-yellow); }
.t .opt .dotcol.r { background: var(--t-red); }

/* service entries */
.t .svc {
  padding: 14px;
  margin-bottom: 11px;
  border-radius: 13px;
  background: var(--t-card);
  text-align: left;
  width: 100%;
  border: 0; color: #fff; font: inherit; cursor: pointer;
}
.t .svc:hover { background: var(--t-card-hi); }
.t .svc b { display: block; font-size: 16px; font-weight: 700; }
.t .svc .adr { font-size: 12.5px; color: rgba(255,255,255,.74); margin-top: 3px; }
.t .svc .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.t .svc .tags i {
  font-style: normal; font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.16); color: #EAF2F7;
}
.t .svc .tags i.on { background: var(--t-green); color: #08301E; }

/* white primary button on brand ground */
.t .wbtn {
  width: 100%; min-height: 54px;
  border: 0; border-radius: var(--r-pill);
  background: #fff; color: #16323F;
  font-family: var(--sans); font-size: 16px; font-weight: 700;
  cursor: pointer; margin-top: 6px;
}
.t .wbtn:hover { background: #EFF4F7; }
.t .wbtn.ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4); }
.t .wbtn.ghost:hover { background: rgba(255,255,255,.1); }
.t .wbtn.alarm { background: var(--t-red); color: #fff; }

/* confirmation */
.t .done { text-align: center; padding-top: 34px; }
.t .done .ring {
  width: 82px; height: 82px; margin: 0 auto 20px;
  border-radius: 50%; background: var(--t-green);
  display: grid; place-items: center; color: #fff;
}
.t .done .ring svg { width: 42px; height: 42px; }
.t .done h3 { font-size: 23px; font-weight: 700; margin: 0 0 9px; }
.t .done p { font-size: 14.5px; color: rgba(255,255,255,.82); margin: 0 0 8px; line-height: 1.5; }

/* selected amount chip */
.t .wbtn.ghost.is-on {
  background: #fff;
  color: #16323F;
  border-color: #fff;
}