/* krai-a.com/try — the phone-call trial. Built on the shared call screen
   (call-demo.css .kcd-*) so it looks like the product's call demo; this file
   adds the dialing / ringing phases, the big call + hang-up buttons, the
   feedback card, and the full-screen call on phones. Page stays light. */
.tr{padding:var(--sp-7) 0 var(--sp-8)}
.tr-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-7);align-items:center}
.tr-copy{max-width:520px}
.tr-eyebrow{margin:0 0 var(--sp-2);font-size:var(--fs-sm);font-weight:600;color:var(--brand-ink)}
.tr-copy h1{font-family:var(--display);font-size:var(--fs-h1)}
.tr-lead{margin:var(--sp-3) 0 0;color:var(--ink2);font-size:var(--fs-lead);line-height:1.55;text-wrap:pretty}
.tr-roles{margin-top:var(--sp-6)}
.tr-label{display:block;margin-bottom:var(--sp-2);font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.tr-chips{display:flex;flex-wrap:wrap;gap:8px}
.tr-chips .kcd-chip{font-family:var(--font);cursor:pointer}
.tr-chips .kcd-chip:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.tr-hint{min-height:3.1em;margin:var(--sp-3) 0 0;padding:10px 14px;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--gline);font-size:var(--fs-sm);line-height:1.55;color:var(--ink2);text-wrap:pretty}
.tr-quota{margin:var(--sp-5) 0 0;font-size:var(--fs-body);color:var(--ink2);font-variant-numeric:tabular-nums}
.tr-quota b{color:var(--ink);font-weight:700}
.tr-quota[data-empty] b{color:var(--scam-ink)}
.tr-consent{margin:var(--sp-2) 0 0;font-size:var(--fs-xs);line-height:1.6;color:var(--ink3)}
.tr-consent a{color:var(--ink2);text-decoration:underline;text-underline-offset:2px}

/* ---- phases (this page's sections; incall / ended reuse .kcd-incall / .kcd-ended) ---- */
.tr-call .kcd-screen>section.tr-idle,.tr-call .kcd-screen>section.tr-dialing{align-items:center;text-align:center}
.tr-call[data-phase="idle"] .tr-idle,
.tr-call:is([data-phase="dialing"],[data-phase="ringing"]) .tr-dialing{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.tr-call .kcd-avatar.tr-av{color:var(--kcd-ink)}
.tr-call .kcd-avatar.tr-av svg{width:44px;height:44px;stroke-width:1.5}
.tr-call[data-phase="idle"] .kcd-avatar::before,.tr-call[data-phase="idle"] .kcd-avatar::after,
.tr-call[data-phase="dialing"] .kcd-avatar::after{animation:none}
.tr-name{font-size:28px}
.tr-shield{display:inline-flex;align-items:center;gap:6px;color:#B9F5D2}
.tr-shield svg{width:16px;height:16px}

.tr-dialbox,.tr-endbox{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:auto}
.tr-dial{display:grid;place-items:center;width:76px;height:76px;padding:0;border:0;border-radius:50%;background:var(--kcd-legit);color:#05210F;cursor:pointer;
  box-shadow:0 0 0 8px rgba(46,224,122,.14),0 14px 34px -12px rgba(46,224,122,.7);transition:transform 160ms var(--kcd-ease),box-shadow 160ms ease}
.tr-dial svg{width:32px;height:32px;fill:currentColor;stroke:none}
.tr-dial:active{transform:scale(.94)}
.tr-dial:focus-visible{outline:2px solid #fff;outline-offset:4px}
.tr-dial:disabled{background:rgba(255,255,255,.18);color:var(--kcd-ink3);box-shadow:none;cursor:not-allowed}
@media (hover:hover) and (pointer:fine){.tr-dial:not(:disabled):hover{transform:scale(1.04)}}
.tr-dial-tx{font-size:15px;font-weight:600}
.tr-mic-note{font-size:12.5px;color:var(--kcd-ink3)}

/* the big red hang-up (the call's main control) */
.tr-call .kcd-c.tr-end{flex:none}
.tr-call .kcd-c.tr-end svg{width:30px;height:30px;padding:21px;fill:#fff;stroke:none}
.tr-ctl{align-items:flex-start;justify-content:space-around;margin-top:auto;padding-top:14px}
.tr-ctl .kcd-c:not(.tr-end){flex:none;width:72px;padding-top:6px}
.tr-call .kcd-c.tr-end span,.tr-ctl .kcd-c span{font-size:12px}
.tr-incall .kcd-ic-av svg{width:20px;height:20px}
.tr-incall .kcd-wave{height:56px;margin:12px 0 8px}
.tr-incall .kcd-risk{margin-top:10px}
.tr-call[data-closing] .kcd-badge{background:rgba(255,181,71,.16);color:#FFE2B3}
.tr-incall .kcd-ic-claim[data-low]{color:#FFE2B3}

/* ---- ended: verdict + feedback ---- */
.tr-call .kcd-screen>section.tr-ended{padding-top:48px;overflow-y:auto;scrollbar-width:none}
.tr-ended::-webkit-scrollbar{display:none}
.tr-ended .kcd-verdict{margin-top:12px;padding:14px 14px 12px}
.tr-ended .kcd-v-out{margin-top:8px;font-size:17px}
.tr-ended .kcd-v-why{-webkit-line-clamp:2}
.tr-fb{margin-top:10px;padding:12px;border-radius:20px;background:rgba(255,255,255,.07)}
.tr-fb-q{margin:0 0 8px;font-size:15px;font-weight:600;text-align:center}
.tr-thumbs{display:flex;gap:8px}
.tr-thumb.kcd-b{min-height:46px;padding:0 10px;white-space:nowrap}
.tr-thumb svg{width:20px;height:20px}
.tr-thumb.kcd-b[aria-pressed="true"],.tr-thumb.kcd-b[aria-pressed="true"]:hover{background:#fff;color:#0B2618}
.tr-note{margin-top:12px}
.tr-note[hidden]{display:none}
.tr-note-l{display:block;margin-bottom:6px;font-size:13px;color:var(--kcd-ink2)}
.tr-note textarea{display:block;width:100%;min-height:52px;padding:10px 12px;border:0;border-radius:14px;background:rgba(255,255,255,.1);color:var(--kcd-ink);font:inherit;font-size:16px;line-height:1.45;resize:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.tr-note textarea::placeholder{color:var(--kcd-ink3)}
.tr-note textarea:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--kcd-ai)}
.tr-note-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.tr-count{font-size:12px;color:var(--kcd-ink3);font-variant-numeric:tabular-nums}
.tr-send{flex:none;min-height:40px;padding:0 20px}
.tr-thanks{margin:10px 0 0;font-size:13.5px;color:#B9F5D2;text-align:center}
.tr-thanks[hidden]{display:none}
.tr-ended .kcd-end-btns{padding-top:12px}
.tr-ended .kcd-end-btns .kcd-b{flex:1;min-height:48px}
.kcd-b:disabled{opacity:.5}

/* ---- in-app sheet (never window.alert) ---- */
.tr-sheet{border:0;padding:0;margin:auto auto 0;width:100%;max-width:440px;max-height:92dvh;border-radius:var(--r-lg) var(--r-lg) 0 0;background:#fff;color:var(--ink);box-shadow:var(--sh-3,0 28px 56px -20px rgba(17,18,20,.22))}
.tr-sheet::backdrop{background:rgba(17,18,20,.42)}
.tr-sheet[open]{animation:tr-up var(--dur) var(--ease-out)}
.tr-sheet-in{padding:var(--sp-6) 22px calc(var(--sp-5) + env(safe-area-inset-bottom,0px))}
.tr-sheet-h{font-family:var(--display);font-size:22px}
.tr-sheet-p{margin:var(--sp-2) 0 0;color:var(--ink2);line-height:1.6;text-wrap:pretty}
.tr-sheet-btns{display:flex;justify-content:flex-end;margin-top:var(--sp-5)}
.tr-sheet-btns{gap:var(--sp-2)}
.tr-sheet-btns .btn{min-width:120px}
.tr-forget{appearance:none;border:0;background:none;padding:0;font:inherit;color:var(--ink2);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.tr-forget:hover{color:var(--ink)}
.tr-forget:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:2px}
.tr-forget-msg{color:var(--ink)}
@media (min-width:700px){.tr-sheet{margin:auto;border-radius:var(--r-lg)}}
@keyframes tr-up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}

/* ---- phones: the call goes full-screen like a real call ---- */
@media (max-width:820px){
  .tr{padding-top:var(--sp-5)}
  .tr-in{grid-template-columns:1fr;gap:var(--sp-5)}
  .tr-call{order:0}
}
@media (max-width:560px){
  .tr-call .kcd-phone{padding:0;border-radius:32px;box-shadow:0 30px 60px -30px rgba(6,60,30,.5)}
  .tr-call .kcd-screen{aspect-ratio:auto;min-height:500px;height:auto;border-radius:32px}
  .tr-call .tr-dialbox{padding-top:20px}
  .tr-call .kcd-bar{display:none}
  .tr-call .kcd-screen>section{padding:28px 20px 24px}
  /* the call button sits above the fold (QA L2, 390x844): copy first, then
     the phone, then the quota + consent; the idle screen drops the avatar */
  .tr{padding-top:var(--sp-4);padding-bottom:var(--sp-6)}
  .tr-in{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .tr-copy{display:contents}
  .tr-eyebrow{display:none}
  .tr-copy h1{font-size:30px}
  .tr-lead{margin-top:6px;font-size:16px}
  .tr-roles{margin-top:var(--sp-4)}
  .tr-hint{min-height:0;margin-top:var(--sp-2);padding:8px 12px;font-size:14px}
  .tr-call{order:1;margin-top:var(--sp-4)}
  .tr-quota{order:2;margin-top:var(--sp-4)}
  .tr-consent{order:3}
  .tr-call[data-phase="idle"] .kcd-screen{min-height:320px}
  .tr-call .tr-idle .tr-av{display:none}
  .tr-call .tr-idle .tr-dialbox{padding-top:16px}
  body.tr-oncall{overflow:hidden}
  body.tr-oncall .tr-call .kcd-phone{position:fixed;inset:0;z-index:200;width:100%;border-radius:0;box-shadow:none}
  body.tr-oncall .tr-call .kcd-screen{height:100dvh;min-height:0;max-height:none;border-radius:0}
  body.tr-oncall .tr-call .kcd-screen>section{padding:calc(24px + env(safe-area-inset-top,0px)) 20px calc(22px + env(safe-area-inset-bottom,0px))}
  body.tr-oncall .tr-call .kcd-screen::after{display:none}
}
@media (prefers-reduced-motion:reduce){.tr-sheet[open]{animation:none}}