/* ==========================================================
   akcavpn.com/teams/: AkcaVPN Teams. The hero is an invite going round: the Team page of
   the dashboard on the left (its own night colours, as dash.akca.network draws it), the
   member's phone on the right (the homepage's iPhone, css/app-ios.css). The sections under
   it show the real pieces: the DNS record, the sign-in field, the email, a payment row.
   Loaded after reborn.css, app-ios.css and home.css. Script: js/teams-page.js.
   ========================================================== */

/* ---------- Hero ---------- */
.tp-hero{ padding: 112px 0 0; }
.tp-intro{ display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 56px; align-items: end; }
.tp-intro-r .lead{ margin-top: 0; }
.tp-lock{ --h: clamp(26px, 2.6vw, 34px); margin-bottom: 28px; }
.tp-hero h1{ font-size: clamp(38px, 3.9vw, 56px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 700; max-width: 19ch; }
.tp-hero .lead{ max-width: 34em; }
.tp-hero .hero-cta{ margin-top: 28px; }

.tp-scene{ display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: center; margin-top: 64px; }

/* ---------- The dashboard's Team page ---------- */
.tc{ --n: #07080f; --i: #f4f5f2; --hl: rgba(255,255,255,.08); --cf2: #a9bdff; --jade: #74d3a6; --gold2: #e6c77a;
  display: grid; grid-template-columns: 172px minmax(0, 1fr); min-height: 540px; border-radius: 18px; overflow: hidden;
  background: var(--n); color: var(--i); font-size: 13px; line-height: 1.4; letter-spacing: -0.003em;
  box-shadow: 0 40px 80px -50px rgba(10,12,22,.6); }
.tc-side{ border-right: 1px solid var(--hl); padding: 18px 10px; display: flex; flex-direction: column; gap: 2px; }
.tc-mark{ width: 22px; height: 22px; margin: 0 8px 18px; }
.tc-side span{ display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 9px; color: rgba(244,245,242,.62); font-size: 12.5px; }
.tc-side span.on{ background: rgba(255,255,255,.07); color: var(--i); }
.tc-side svg{ width: 15px; height: 15px; flex: none; }

.tc-main{ padding: 28px 30px 24px; min-width: 0; }
.tc-head{ display: flex; align-items: center; gap: 14px; }
.tc-tile, .tp-tile, .tp-logo{ font-style: normal; display: grid; place-items: center; background: #fff; color: #0a0c16; font-weight: 700; letter-spacing: -0.02em; }
.tc-tile{ width: 44px; height: 44px; border-radius: 11px; font-size: 15px; }
.tc-name{ display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.tc-meta{ margin-top: 3px; color: rgba(244,245,242,.6); font-size: 12.5px; }
.tc-badge{ font-style: normal; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0; color: rgba(244,245,242,.75); background: rgba(255,255,255,.07); white-space: nowrap; }
.tc-badge::before{ content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .8; }
.tc-badge.ok{ color: var(--jade); background: rgba(116,211,166,.12); }
.tc-badge.cf{ color: var(--cf2); background: rgba(169,189,255,.12); }
.tc-badge.wait{ color: var(--gold2); background: rgba(230,199,122,.12); }

.tc-tabs{ display: flex; gap: 22px; margin-top: 24px; border-bottom: 1px solid var(--hl); }
.tc-tabs span{ padding: 0 0 10px; color: rgba(244,245,242,.55); font-size: 13px; }
.tc-tabs span.on{ color: var(--i); box-shadow: inset 0 -2px 0 var(--i); }

.tc-seats{ display: flex; align-items: center; gap: 12px; margin-top: 20px; color: rgba(244,245,242,.65); font-size: 12.5px; }
.tc-sq{ display: inline-flex; gap: 5px; }
.tc-sq i{ width: 13px; height: 13px; border-radius: 4px; background: rgba(255,255,255,.12); transition: background .4s, box-shadow .4s; }
.tc-sq i.m{ background: rgba(244,245,242,.85); }
.tc-sq i.inv{ background: none; box-shadow: inset 0 0 0 1px rgba(244,245,242,.55); }
.tc-sq i.new{ animation: tc-fill .9s var(--ease); }
@keyframes tc-fill{ 0%{ background: var(--cf2); transform: scale(.6); } 50%{ background: var(--cf2); transform: none; } }

.tc-invite{ display: flex; gap: 8px; margin-top: 20px; }
.tc-invite input{ flex: 1; min-width: 0; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14);
  background: transparent; color: var(--i); font: inherit; font-size: 13px; }
.tc-invite input:focus{ outline: none; border-color: rgba(244,245,242,.5); }
.tc-invite input:disabled{ color: rgba(244,245,242,.45); }
.tc-invite button{ height: 38px; padding: 0 16px; border-radius: 999px; border: 0; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tc-send{ background: var(--i); color: var(--n); transition: opacity .2s, transform .15s; }
.tc-send:active{ transform: scale(.97); }
.tc-send:disabled{ opacity: .35; cursor: default; }
.tc-again{ background: none; color: var(--i); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.tc-invite button:focus-visible, .tp-btn:focus-visible{ outline: 2px solid var(--cf2); outline-offset: 2px; }

.tc-table{ margin-top: 18px; }
.tc-row{ display: grid; grid-template-columns: minmax(0, 1fr) 96px 104px; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hl); }
.tc-row > span:last-child{ color: rgba(244,245,242,.6); font-size: 12.5px; white-space: nowrap; }
.tc-th{ padding: 0 0 9px; border-top: 0; color: rgba(244,245,242,.45); font-size: 11.5px; }
.tc-th > span:last-child{ font-size: 11.5px; color: rgba(244,245,242,.45); }
.tc-row b{ display: block; font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-row small{ display: block; margin-top: 2px; font-family: var(--mono); font-size: 10.5px; color: rgba(244,245,242,.42); letter-spacing: .02em; }
.tc-row small.plain{ font-family: inherit; font-size: 11px; letter-spacing: 0; }
.tc-row.in{ animation: tc-row .5s var(--ease); }
@keyframes tc-row{ from{ opacity: 0; transform: translateY(-6px); } }

/* ---------- The member's phone ---------- */
.tp-phone{ justify-self: center; display: grid; justify-items: center; }
.tp-phone .app-phone{ width: 320px; }
.tp-cap{ margin-top: 18px; min-height: 2.8em; max-width: 300px; text-align: center; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink-2); }

/* The app's top bar: AkcaVPN and today's allowance on Free, the team's tile and name with a seat. */
.tp-page .ap-top{ justify-content: flex-start; }
.tp-self, .tp-team{ display: flex; align-items: center; gap: calc(9 * var(--p)); }
.tp-team{ display: none; }
.tp-tile{ width: calc(24 * var(--p)); height: calc(24 * var(--p)); border-radius: calc(7 * var(--p)); font-size: calc(10 * var(--p)); }
.tp-team b{ letter-spacing: -0.01em !important; font-size: calc(16 * var(--p)) !important; }
.tp-allow{ margin-left: auto; padding: calc(6 * var(--p)) calc(11 * var(--p)); border-radius: 999px; background: rgba(255,255,255,.08);
  font-size: calc(12.5 * var(--p)); font-weight: 600; color: rgba(255,255,255,.85); }
.ap-app[data-tp="team"] .tp-self, .ap-app[data-tp="team"] .tp-allow{ display: none; }
.ap-app[data-tp="team"] .tp-team{ display: flex; animation: tp-in .5s var(--ease); }
@keyframes tp-in{ from{ opacity: 0; transform: translateY(calc(-6 * var(--p))); } }

/* Over the app: the invite email, then the join page. The status bar and home bar stay on top. */
.tp-page .ap-sbar{ z-index: 7; transition: color .3s; }
/* On the white mail header the status bar turns dark, as iOS does. */
.ap-app[data-tp="mail"] .ap-sbar{ color: #0b0b0b; }
.ap-app[data-tp="mail"] .ap-cell, .ap-app[data-tp="mail"] .ap-batt{ fill: #0b0b0b; color: #0b0b0b; }
.ap-app[data-tp="mail"] .ap-home{ background: #0b0b0b; }
.tp-page .ap-home{ z-index: 8; }
.tp-ov{ position: absolute; inset: 0; z-index: 6; visibility: hidden; transition: transform .55s var(--ease), visibility 0s .55s; }
.tp-mail{ transform: translateY(100%); background: #f3f3f1; color: #0b0b0b; display: flex; flex-direction: column; }
.tp-join{ transform: translateX(100%); background: #07080f; color: #f4f5f2; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: calc(76 * var(--p)) calc(28 * var(--p)) 0; }
.ap-app[data-tp="mail"] .tp-mail, .ap-app[data-tp="join"] .tp-join{ visibility: visible; transform: none; transition: transform .55s var(--ease), visibility 0s; }
.ap-app[data-tp="join"] .tp-mail{ visibility: visible; transform: translateX(-30%); transition: transform .55s var(--ease), visibility 0s; }

.tp-mailhead{ background: #fff; padding: calc(64 * var(--p)) calc(20 * var(--p)) calc(14 * var(--p)); border-bottom: 1px solid rgba(0,0,0,.08); }
.tp-from{ display: flex; justify-content: space-between; align-items: baseline; font-size: calc(15 * var(--p)); }
.tp-from b{ font-weight: 600; }
.tp-from i{ font-style: normal; font-size: calc(13 * var(--p)); color: #8a8a8a; }
.tp-subj{ margin-top: calc(4 * var(--p)); font-size: calc(14 * var(--p)); color: #3a3a3a; }
.tp-mailbody{ flex: 1; padding: calc(16 * var(--p)) calc(12 * var(--p)); }
.tp-card{ background: #141414; color: #fff; border-radius: calc(16 * var(--p)); padding: calc(24 * var(--p)) calc(22 * var(--p)) calc(26 * var(--p)); }
.tp-chip{ display: inline-flex; align-items: center; background: #fff; border-radius: calc(7 * var(--p)); padding: calc(7 * var(--p)) calc(10 * var(--p)); }
.tp-chip img{ height: calc(11 * var(--p)); width: auto; }
.tp-chip i{ width: 1px; height: calc(11 * var(--p)); margin: 0 calc(6 * var(--p)); background: #d6d6d3; }
.tp-chip b{ font-size: calc(11 * var(--p)); font-weight: 600; color: #0b0b0b; line-height: 1; }
.tp-logo{ width: calc(44 * var(--p)); height: calc(44 * var(--p)); border-radius: calc(11 * var(--p)); font-size: calc(15 * var(--p)); }
.tp-card .tp-logo{ margin-top: calc(24 * var(--p)); }
.tp-card h3, .tp-join h3{ margin-top: calc(14 * var(--p)); font-size: calc(24 * var(--p)); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.tp-card p{ margin-top: calc(10 * var(--p)); font-size: calc(14 * var(--p)); line-height: 1.5; color: #d6d6d6; }
.tp-btn{ margin-top: calc(20 * var(--p)); height: calc(44 * var(--p)); padding: 0 calc(20 * var(--p)); border: 0; border-radius: calc(10 * var(--p));
  background: #fff; color: #0b0b0b; font: inherit; font-size: calc(14 * var(--p)); font-weight: 600; cursor: pointer; }
.tp-url{ position: absolute; top: calc(58 * var(--p)); left: 0; right: 0; font-size: calc(12 * var(--p)); color: rgba(244,245,242,.45); }
.tp-join .tp-logo{ width: calc(64 * var(--p)); height: calc(64 * var(--p)); border-radius: calc(16 * var(--p)); font-size: calc(21 * var(--p)); margin-top: calc(70 * var(--p)); }
.tp-dom{ display: inline-flex; align-items: center; gap: calc(6 * var(--p)); margin-top: calc(8 * var(--p)); font-size: calc(14 * var(--p)); color: rgba(244,245,242,.7); }
.tp-dom svg{ width: calc(15 * var(--p)); height: calc(15 * var(--p)); color: #74d3a6; }
.tp-join > p:not(.tp-url):not(.tp-dom){ margin-top: calc(14 * var(--p)); font-size: calc(15 * var(--p)); line-height: 1.45; color: rgba(244,245,242,.75); max-width: calc(280 * var(--p)); }
.tp-join .tp-btn{ margin-top: calc(28 * var(--p)); width: 100%; border-radius: 999px; height: calc(50 * var(--p)); font-size: calc(16 * var(--p)); }

/* ---------- Sections ---------- */
.tp-sec .h2{ font-size: clamp(36px, 4.6vw, 60px); }
.tp-steps{ list-style: none; counter-reset: s; margin-top: 48px; border-top: 1px solid var(--line-2); }
.tp-steps li{ counter-increment: s; display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: center;
  padding: 32px 0; border-bottom: 1px solid var(--line); }
.tp-steps li::before{ content: counter(s); align-self: start; font-size: 15px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: 2px; }
.tp-steps li > div:first-of-type{ display: grid; gap: 6px; align-self: start; }
.tp-steps b{ font-size: 20px; font-weight: 650; letter-spacing: -0.02em; }
.tp-steps li > div:first-of-type span{ font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 30em; }

.tp-dns{ display: grid; grid-template-columns: 36px auto minmax(0, 1fr); column-gap: 16px; row-gap: 8px; padding: 16px 18px;
  border: 1px solid var(--line-2); border-radius: 14px; font-size: 12px; color: var(--ink-3); }
.tp-dns code{ font-family: var(--mono); font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-form{ display: flex; gap: 8px; align-items: center; }
.tp-form span{ flex: 1; height: 46px; display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 12px; font-size: 15px; }
.tp-form i{ font-style: normal; height: 46px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; }
.tp-inbox{ display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 2px; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: 14px; }
.tp-inbox b{ font-size: 15px; font-weight: 600; }
.tp-inbox span{ font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-inbox small{ grid-column: 2; font-size: 14px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-note{ margin-top: 24px; font-size: 16px; color: var(--ink-2); }

.tp-facts{ margin-top: 40px; }
.tp-pay{ margin-top: 20px; border: 1px solid var(--line-2); border-radius: 16px; padding: 4px 20px; font-size: 14px; background: #fff; }
.tp-pay-row{ display: grid; grid-template-columns: 100px minmax(0, 1fr) 56px 64px auto; gap: 12px; align-items: center; padding: 12px 0; }
.tp-pay-row + .tp-pay-row{ border-top: 1px solid var(--line); }
.tp-pay-th{ font-size: 12px; color: var(--ink-3); padding: 10px 0 6px; }
.tp-pay-row small{ display: block; font-size: 12.5px; color: var(--ink-3); }
.tp-paid{ font-style: normal; display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; color: #108056; background: rgba(16,128,86,.09); }
.tp-paid::before{ content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.tp-pay u{ color: var(--cf); text-decoration-color: rgba(46,91,255,.35); text-underline-offset: 3px; }

.tp-two{ display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 48px; }
.tp-two h3{ font-size: 20px; font-weight: 650; letter-spacing: -0.02em; padding-bottom: 14px; }
.tp-two ul{ list-style: none; border-top: 1px solid var(--line-2); }
.tp-two li{ padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 17px; color: var(--ink-2); }

.tp-end{ padding-bottom: 140px; }
.tp-end .hero-cta{ margin-top: 28px; }

/* ---------- Narrower ---------- */
@media (max-width: 1080px){
  .tp-scene{ grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; }
  .tp-phone .app-phone{ width: 280px; }
  .tc{ grid-template-columns: minmax(0, 1fr); }
  .tc-side{ display: none; }
}
@media (max-width: 900px){
  .tp-hero{ padding-top: 104px; }
  .tp-intro{ grid-template-columns: 1fr; gap: 20px; }
  .tp-scene{ grid-template-columns: 1fr; gap: 40px; margin-top: 56px; }
  .tc{ min-height: 0; }
  .tp-steps li{ grid-template-columns: 32px minmax(0, 1fr); }
  .tp-steps li > div:last-child{ grid-column: 2; }
  .tp-two{ grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px){
  .tc-main{ padding: 22px 18px 16px; }
  .tc-row{ grid-template-columns: minmax(0, 1fr) auto; }
  .tc-row > span:last-child{ display: none; }
  .tc-invite{ flex-wrap: wrap; }
  .tc-invite input{ flex-basis: 100%; }
  .tc-invite button{ flex: 1; }
  .tp-phone .app-phone{ width: min(300px, 80vw); }
  .tp-pay{ padding: 4px 14px; }
  .tp-pay-row{ grid-template-columns: minmax(0, 1fr) auto auto; }
  .tp-pay-row > span:nth-child(1), .tp-pay-row > span:nth-child(4){ display: none; }
  .tp-dns{ grid-template-columns: 1fr; }
  .tp-dns span{ display: none; }
  .tp-dns code{ white-space: normal; word-break: break-all; font-size: 11.5px; }
  .tp-form{ flex-wrap: wrap; }
  .tp-form span{ flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce){
  .tp-ov, .ap-app[data-tp] .tp-ov{ transition: none; }
  .tc-row.in, .tc-sq i.new, .ap-app[data-tp="team"] .tp-team{ animation: none; }
}