/* Install page: compat button strip, intro split, device tables. */

.install__compat-check {
  text-align: center;
  padding-block: var(--space-5);
}

.install-intro {
  padding-block: var(--space-6);
}

.install-intro__layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-6);
  align-items: center;
  max-width: var(--container-lg);
}

.install-intro__copy h2,
.install-intro__copy h3 {
  text-align: left;
  margin-bottom: var(--space-4);
}

.install-intro__media img {
  max-width: 190px;
  margin-inline: auto;
}

/* device tables */
.devices__groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}

.devices__os {
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.devices__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: start;
}

.devices__brand h4 {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.devices__brand ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.devices__brand li {
  font-size: var(--text-body);
  padding: 6px 14px;
  border-radius: var(--radius-btn);
}

.devices__brand li:nth-child(odd) {
  background: rgba(37, 70, 95, 0.06);
}

.devices__more {
  margin-top: var(--space-4);
}

.devices__more summary {
  cursor: pointer;
  text-align: center;
  list-style: none;
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-text);
}

.devices__more summary::-webkit-details-marker {
  display: none;
}

.devices__more[open] summary i {
  display: inline-block;
  transform: rotate(180deg);
}

.devices__more .devices__columns {
  margin-top: var(--space-4);
}

@media (max-width: 1024px) {
  .install-intro__layout,
  .devices__groups {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Install-eSIM page — 2026-08 design (`.ip-*`)

   Uses the --so-* tokens from tokens.css, same as the home page's `.hp-*` set.
   The older rules above still serve the previous rendering; they go when
   nothing references them.
   ========================================================================== */

/* --- Hero -----------------------------------------------------------------
   Re-skin of the SHARED `.page-hero` (PageHero + hero.css) to this design's
   band — the markup, breadcrumb semantics and locale-aware links stay in that
   one component. Only the band's colour, rhythm and type change here. */

.ip-hero .page-hero {
  padding: 48px 0 44px;
  background: var(--so-grad-band);
}

/* .band-gradient paints the older navy→teal band plus its texture overlay; this
   design's band is the flat purple→blue gradient above, so switch it off. */
.ip-hero .page-hero.band-gradient::before {
  content: none;
}

.ip-hero .container {
  max-width: var(--so-w-lg);
  padding-inline: var(--so-gutter);
}

.ip-hero .page-hero__eyebrow {
  margin: 0 0 6px;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-md);
  font-weight: 300;
}

.ip-hero .page-hero h1 {
  margin: 0;
  color: #fff;
  font-size: var(--text-h1);
  font-weight: 500;
  line-height: 1.15;
}

.ip-hero .page-hero__breadcrumb {
  padding: 18px 0 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-sm);
}

/* --- Compatibility check --------------------------------------------------
   Wrapper only: the trigger button and its QR dialog are the shared
   `.compat-check` block (device-compat.css), which already runs on the brand
   purple via --color-primary. Nothing about the block is restyled here. */

.ip-compat {
  padding: 32px var(--so-gutter) 0;
  /* Explicit, like every other band on this page: without it the body's grey
     (--color-bg) shows through and the strip reads as a stray section. */
  background: var(--so-surface);
  text-align: center;
}

/* --- Shared section heading ----------------------------------------------- */

.ip-head {
  margin-bottom: 36px;
  text-align: center;
}

.ip-head h2 {
  margin: 0;
  color: var(--so-ink-strong);
  font-size: var(--text-h2);
  font-weight: 500;
  letter-spacing: -0.3px;
  line-height: 1.15;
}

.ip-head p {
  margin: 12px 0 0;
  color: var(--so-ink-muted);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.3;
}

/* --- Intro ---------------------------------------------------------------- */

.ip-intro {
  padding: 64px var(--so-gutter);
  background: var(--so-surface);
}

.ip-intro__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  max-width: var(--so-w-lg);
  margin-inline: auto;
}

/* The copy is editor HTML, so style the elements it can emit rather than
   classes it will never carry. */
.ip-intro__copy h2 {
  margin: 0 0 20px;
  color: var(--so-ink-strong);
  font-size: var(--text-h2);
  font-weight: 500;
  line-height: 1.2;
}

.ip-intro__copy p {
  margin: 0 0 18px;
  color: var(--so-ink-strong);
  font-size: var(--text-md);
  line-height: 1.6;
}

.ip-intro__copy p:last-child { margin-bottom: 0; }

/* The intro artwork is a tall portrait shot; at full column width it towers
   over the copy beside it. Cap the height and centre it so the two sides of the
   band stay in proportion, and keep the aspect ratio intact. */
.ip-intro__media {
  display: flex;
  justify-content: center;
}

.ip-intro__media img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 420px;
  border-radius: var(--r-2xl);
}

@media (min-width: 900px) {
  .ip-intro__grid { grid-template-columns: 1.4fr 1fr; }
}

/* --- Compatible devices ---------------------------------------------------- */

.ip-devices {
  padding: 56px var(--so-gutter);
  background: var(--so-tint);
}

.ip-devices__inner {
  max-width: var(--so-w-lg);
  margin-inline: auto;
}

.ip-devices__search {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 60px;
  max-width: 560px;
  margin: 0 auto 32px;
  padding-inline: 22px;
  background: var(--so-surface);
  border-radius: var(--r-3xl);
  box-shadow: var(--so-shadow-tile);
}

.ip-devices__search i {
  flex-shrink: 0;
  color: var(--so-purple);
  font-size: var(--text-xl);
}

.ip-devices__search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-weight:300;font-size:var(--text-md);font-family:var(--font-body);line-height:normal;
  color: var(--so-ink-strong);
}

.ip-devices__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

.ip-devices__os {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 24px;
  color: var(--so-ink-strong);
  font-size: var(--text-xl);
  font-weight: 600;
}

.ip-devices__os i { color: var(--so-purple); font-size: var(--text-h3); }

.ip-devices__brand { margin-bottom: 20px; }

.ip-devices__brand h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  color: var(--so-ink-strong);
  font-size: var(--text-md);
  font-weight: 600;
}

.ip-devices__brand h4 i { color: var(--so-purple); font-size: var(--text-lg); }

.ip-devices__brand ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ip-devices__brand li {
  padding: 8px 14px;
  border-radius: var(--r-sm);
  color: var(--so-ink-muted);
  font-size: var(--text-sm);
}

/* Zebra banding so a long model list stays scannable. */
.ip-devices__brand li.is-alt { background: rgba(131, 87, 249, 0.06); }

/* One compressor over BOTH columns.

   Clamped by HEIGHT, not by brand count: Android and iOS carry very different
   numbers of models per brand, so a brand-count fold left one column far longer
   than the other. Equal max-heights keep them level, and the fade signals that
   the list continues. The button follows the columns in the DOM, so expanding
   pushes it down rather than stranding it mid-list. */
/* The clamp lives in a custom property so device-search.js can read the target
   height without measuring an element that is mid-animation. */
.ip-devices__cols { --ip-clamp: 620px; }

.ip-devices__col {
  position: relative;
  max-height: var(--ip-clamp);
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.22, 0.7, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .ip-devices__col { transition: none; }
}

.ip-devices__cols.is-expanded .ip-devices__col {
  max-height: none;
  /* overflow stays hidden: with no max-height there is nothing left to clip,
     and flipping it to visible mid-animation removed the clip the growth needs
     to be visible at all — the column snapped instead of easing. */
}

/* Fade over the clamp edge. It cross-fades rather than vanishing, so the
   expand reads as the list continuing rather than a flash. */
.ip-devices__col::after {
  content: "";
  transition: opacity 0.25s ease;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 96px;
  background: linear-gradient(180deg, rgba(248, 246, 254, 0) 0%, var(--so-tint) 88%);
  pointer-events: none;
}

.ip-devices__cols.is-expanded .ip-devices__col::after { opacity: 0; }

.ip-devices__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 24px auto 0;
  padding: 12px 28px;
  border: 1px solid var(--so-purple);
  border-radius: var(--radius-btn);
  background: var(--so-surface);
  color: var(--so-purple);
  font-weight:500;font-size:var(--text-base);font-family:var(--font-body);line-height:normal;
  cursor: pointer;
}

.ip-devices__more:hover { background: var(--so-chip); }

/* An explicit `display` beats the UA's [hidden]{display:none}, so elements the
   script hides need this or they stay on screen. Applies to both boxes that
   carry a display of their own. */
.ip-devices__more[hidden],
.ip-devices__cols[hidden] {
  display: none;
}
.ip-devices__more i { transition: transform 0.2s ease; }

/* One button, two server-rendered labels — CSS picks which is visible so the
   JS never has to choose a string. */
.ip-devices__more .ip-devices__more-hide { display: none; }
.ip-devices__more[aria-expanded="true"] .ip-devices__more-hide { display: inline; }
.ip-devices__more[aria-expanded="true"] .ip-devices__more-show { display: none; }
.ip-devices__more[aria-expanded="true"] i { transform: rotate(180deg); }

.ip-devices__empty {
  margin: 0;
  padding: 24px 0;
  color: var(--so-ink-meta);
  font-size: var(--text-base);
  text-align: center;
}

@media (min-width: 760px) {
  .ip-devices__cols { grid-template-columns: 1fr 1fr; }
}

/* --- Install steps --------------------------------------------------------- */

.ip-steps {
  padding: 76px var(--so-gutter);
  background: var(--so-surface);
}

.ip-steps__inner { max-width: var(--so-w-lg); margin-inline: auto; }
.ip-steps .ip-head { margin-bottom: 52px; }

.ip-steps__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
}

.ip-steps__device { text-align: center; }

.ip-steps__device img {
  width: 300px;
  max-width: 100%;
  filter: drop-shadow(0 30px 50px rgba(70, 50, 140, 0.22));
}

.ip-steps__list {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ip-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 26px;
  background: var(--so-tint);
  border-radius: var(--so-radius-md);
}

.ip-step img {
  flex-shrink: 0;
  width: 74px;
  height: 74px;
}

.ip-step__n {
  color: var(--so-purple);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.ip-step h3 {
  margin: 4px 0 7px;
  font-size: var(--text-xl);
  font-weight: 600;
}

.ip-step p {
  margin: 0;
  color: var(--so-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

@media (min-width: 900px) {
  .ip-steps__grid { grid-template-columns: 380px 1fr; }
}

/* --- What is an eSIM ------------------------------------------------------- */

.ip-what {
  padding: 0 var(--so-gutter) 80px;
  background: var(--so-surface);
}

.ip-what__card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  max-width: var(--so-w-lg);
  margin-inline: auto;
  padding: 48px 46px;
  background: var(--so-tint);
  border-radius: var(--so-radius-lg);
}

.ip-what__media img {
  display: block;
  width: 100%;
  border-radius: var(--so-radius-md);
}

.ip-what__card h2 {
  margin: 0 0 18px;
  color: var(--so-ink-strong);
  font-size: var(--text-h2);
  font-weight: 500;
  line-height: 1.2;
}

.ip-what__card p {
  margin: 0 0 16px;
  color: var(--so-ink-strong);
  font-size: var(--text-base);
  line-height: 1.65;
}

.ip-what__card p:last-child { margin-bottom: 0; }

@media (max-width: 899px) {
  .ip-what__card { padding: 32px 24px; }
}

@media (min-width: 900px) {
  .ip-what__card { grid-template-columns: 1fr 1.2fr; }
}