/* ==========================================================
   The homepage in the dashboard's language (dash.akca.network,
   docs/DESIGN.md there): flat surfaces on hairlines, no glows or
   coloured shadows, an ink pill for the main action, the blue
   only as an accent. Then AkcaVPN Teams, with the dashboard's
   own seat picker. Loaded by the homepage only, after reborn.css.
   ========================================================== */

/* ---------- Buttons and the pill: the dashboard's ---------- */
.btn-primary{ background: var(--ink); color: #fff; box-shadow: none; }
.btn-primary:hover{ background: #23273a; transform: none; }
.btn-primary .gplus{ color: #a9bdff; }
.btn-ghost:hover{ background: rgba(10,12,22,.03); border-color: rgba(10,12,22,.32); }
.pill{ box-shadow: none; }

/* ---------- What's different: one panel in three columns ---------- */
.feat-grid{ gap: 0; border: 1px solid var(--line-2); border-radius: 20px; overflow: hidden; background: #fff; }
.feat{ border: 0; border-radius: 0; box-shadow: none; background: none; padding: 32px; }
.feat + .feat{ border-left: 1px solid var(--line); }
.feat h3{ font-size: 20px; letter-spacing: -0.02em; font-weight: 650; }
.feat p{ font-size: 15px; }
@media (max-width: 900px){
  .feat{ padding: 24px; }
  .feat + .feat{ border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- Pricing: flat cards on hairlines ---------- */
.plan{ box-shadow: none; border-radius: 20px; }
.plan--plus{ background: #fff; border-color: rgba(46,91,255,.4); }
.terms span{ background: #fff; }

/* ---------- Download: one panel, a column per platform ---------- */
.dl{ gap: 0; border: 1px solid var(--line-2); border-radius: 20px; overflow: hidden; background: #fff; }
.dl a{ border: 0; border-radius: 0; box-shadow: none; background: none; padding: 24px; }
.dl a + a{ border-left: 1px solid var(--line); }
.dl a:hover{ transform: none; background: var(--bg-2); }
@media (max-width: 1080px){
  /* A list of rows, as in the dashboard */
  .dl{ grid-template-columns: 1fr; }
  .dl a{ grid-template-columns: 26px 1fr; grid-template-areas: "i b" "i s"; column-gap: 16px; row-gap: 2px; align-items: center; padding: 16px 20px; }
  .dl a + a{ border-left: 0; border-top: 1px solid var(--line); }
  .dl svg, .dl img{ grid-area: i; margin: 0; }
  .dl b{ grid-area: b; font-size: 16px; }
  .dl span{ grid-area: s; }
}

/* ==========================================================
   AkcaVPN Teams
   ========================================================== */
.teams-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 72px; align-items: start; }

/* "AkcaVPN | Teams": the wordmark, a hairline and Teams, as on the dashboard and the emails */
.tm-head{ --h: clamp(30px, 3.6vw, 46px); }
.tm-lockup{ display: inline-flex; align-items: center; }
.tm-lockup img{ height: var(--h); width: auto; }
.tm-lockup i{ width: 1px; height: calc(var(--h) * .95); margin: 0 calc(var(--h) * .5); background: rgba(10,12,22,.3); }
.tm-lockup b{ font-size: calc(var(--h) * .98); line-height: 1; font-weight: 600; letter-spacing: -0.01em; }
.teams .lead{ max-width: 30em; }
.teams .hero-cta{ margin-top: 32px; }

.tm-rows{ list-style: none; margin-top: 48px; border-top: 1px solid var(--line-2); }
.tm-rows li{ padding: 20px 0; border-bottom: 1px solid var(--line); display: grid; gap: 4px; }
.tm-rows b{ font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.tm-rows span{ font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 34em; }
.tm-more{ margin-top: 20px; font-size: 15px; }
.tm-more a{ color: var(--cf); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(46,91,255,.35); text-underline-offset: 4px; }

/* The seat picker (components/team/SeatPicker.tsx in the dashboard) */
.seatcard{ border: 1px solid var(--line-2); border-radius: 20px; background: #fff; padding: 28px; }
.seat-row{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.seat-label{ font-size: 13px; color: var(--ink-3); margin-bottom: 10px; }

.stepper{ display: inline-flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; border: 1px solid var(--line-2); }
.stepper:focus-visible{ outline: none; border-color: rgba(10,12,22,.5); }
.stepper button{ width: 48px; height: 48px; border-radius: 50%; border: 0; background: none; color: var(--ink); display: grid; place-items: center; cursor: pointer;
  transition: background .15s; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.stepper button:hover{ background: rgba(10,12,22,.05); }
.stepper button:active{ background: rgba(10,12,22,.09); }
.stepper button:disabled{ opacity: .3; cursor: default; background: none; }
.stepper svg{ width: 18px; height: 18px; }
.seat-count{ width: 116px; height: 48px; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 6px; }
.seat-count b{ font-size: 30px; font-weight: 650; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.seat-count span{ font-size: 15px; color: var(--ink-3); }
.roll-up{ animation: roll-up .22s var(--ease); }
.roll-down{ animation: roll-down .22s var(--ease); }
@keyframes roll-up{ from{ transform: translateY(70%); opacity: 0; } }
@keyframes roll-down{ from{ transform: translateY(-70%); opacity: 0; } }

.billing{ display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--line-2); }
.billing button{ height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 500;
  color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background .15s, color .15s; }
.billing button:hover{ color: var(--ink); }
.billing button[aria-checked="true"]{ background: var(--ink); color: #fff; }
.billing small{ font-size: 12px; color: #108056; }
.billing button[aria-checked="true"] small{ color: rgba(255,255,255,.65); }

.seatmap{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 28px; min-height: 18px; }
.seatmap i{ width: 18px; height: 18px; border-radius: 5px; background: rgba(10,12,22,.82); }
.seatmap i.new{ animation: seat-in .9s var(--ease); }
.seatmap em{ font-style: normal; font-size: 12px; line-height: 18px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
@keyframes seat-in{ 0%{ transform: scale(.4); background: var(--cf); } 45%{ transform: none; background: var(--cf); } }
.seat-note{ margin-top: 12px; font-size: 13px; color: var(--ink-3); }

.seat-price{ margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.seat-price p:first-child{ display: flex; align-items: baseline; gap: 8px; }
.seat-price b{ font-size: 40px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.seat-price span{ font-size: 16px; color: var(--ink-3); }
.seat-price p + p{ margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.seatcard .btn{ width: 100%; margin-top: 24px; }
.seat-alt{ margin-top: 16px; text-align: center; font-size: 14px; color: var(--ink-3); }
.seat-alt a{ color: var(--cf); text-decoration: underline; text-decoration-color: rgba(46,91,255,.35); text-underline-offset: 4px; }

@media (max-width: 900px){
  .teams-grid{ grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 600px){
  .seatcard{ padding: 20px; }
  .seat-row{ flex-direction: column; align-items: stretch; }
  .stepper{ justify-content: space-between; }
  .billing{ align-self: flex-start; }
  .tm-rows{ margin-top: 36px; }
}
@media (prefers-reduced-motion: reduce){
  .roll-up, .roll-down, .seatmap i.new{ animation: none; }
}