/* Link in Bio landing (/link-in-bio). Shared system lives in ds2.css; this file
   only adds the claim field, the example phone and the comparison. The phone's
   themes mirror includes/linkinbio/Themes.php presets. */
.lb-hero{position:relative;padding:140px 0 56px;overflow:hidden}
.lb-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:56px;align-items:center}
.lb-hero h1{font-size:clamp(2.25rem,4.6vw,3.5rem);max-width:13em}
.lb-hero .sub{color:var(--text-2);font-size:1.125rem;margin-top:18px;max-width:32em}

/* The claim: the URL is the input. */
.claim{margin-top:36px;max-width:620px}
.claim-field{
  display:flex;align-items:baseline;gap:0;flex-wrap:nowrap;
  padding:18px 22px;border-radius:var(--radius-sm);background:var(--panel);
  border:1px solid var(--border-strong);box-shadow:var(--shadow-tile);
  font-size:clamp(1.35rem,3.2vw,2rem);font-weight:600;letter-spacing:-0.02em;cursor:text;
  transition:border-color 0.2s ease;
}
.claim-field:focus-within{border-color:var(--text)}
.claim-prefix{color:var(--text-3);white-space:nowrap}
.claim-input{
  flex:1;min-width:0;background:transparent;border:0;color:var(--text);font:inherit;letter-spacing:inherit;padding:0;
}
.claim-input::placeholder{color:#3F3F46}
.claim-input:focus{outline:none}
.claim-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;flex-wrap:wrap}
.claim-status{min-height:1.5em;font-size:0.9375rem;color:var(--text-2)}
.claim-status.is-ok{color:#A5B4FC}
.claim-status.is-bad{color:#FCA5A5}
.claim-status button{background:none;border:0;padding:0;color:var(--text);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;margin-left:6px}
.claim .btn[aria-disabled="true"]{opacity:0.45;pointer-events:none}
.claim-note{margin-top:14px;font-size:0.875rem;color:var(--text-3)}

/* Phone: the homepage iPhone, showing a real-looking page in one of the real themes. */
.lb-side{display:flex;flex-direction:column;align-items:center;gap:22px}
.lb-phone .device-screen{background:#000}
.pg{
  --pg-bg:#05050A;--pg-text:#FFFFFF;--pg-muted:rgba(255,255,255,0.78);
  --pg-btn-bg:rgba(255,255,255,0.14);--pg-btn-text:#FFFFFF;--pg-btn-border:rgba(255,255,255,0.28);--pg-radius:16px;--pg-font:"Plus Jakarta Sans",sans-serif;
  --pg-feat-bg:#FFFFFF;--pg-feat-text:#0B0B0F;--pg-scene:1;
  position:relative;isolation:isolate;
  height:100%;padding:72px 24px 22px;display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--pg-bg);color:var(--pg-text);font-family:var(--pg-font);
  transition:background 0.6s var(--ease),color 0.6s var(--ease);
}
/* Default look: black with a soft indigo glow, glass buttons, one solid featured link. */
.pg-scene{position:absolute;inset:0;z-index:-1;opacity:var(--pg-scene);transition:opacity 0.6s var(--ease);
  background:
    radial-gradient(60% 38% at 18% 14%,rgba(80,70,229,0.55),transparent 70%),
    radial-gradient(55% 40% at 92% 40%,rgba(139,92,246,0.38),transparent 70%),
    radial-gradient(70% 45% at 30% 92%,rgba(80,70,229,0.42),transparent 72%),
    #05050A}
.pg-photo{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#1C1C26,#0B0B12);color:#fff;font-size:2rem;font-weight:700;letter-spacing:-0.02em}
.pg-link.is-feat{background:var(--pg-feat-bg);color:var(--pg-feat-text);border-color:var(--pg-feat-bg)}
.pg-link{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pg-avatar{width:84px;height:84px;border-radius:50%;padding:2px;background:linear-gradient(150deg,rgba(255,255,255,0.9),rgba(255,255,255,0.25));box-shadow:0 8px 24px -8px rgba(0,0,0,0.5)}
.pg-name{margin-top:14px;font-size:1.3rem;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-bio{margin-top:4px;font-size:0.92rem;color:var(--pg-muted);max-width:20em;line-height:1.4}
.pg-social{display:flex;gap:16px;margin-top:14px}
.pg-social svg{width:22px;height:22px;fill:var(--pg-text)}
.pg-links{width:100%;display:flex;flex-direction:column;gap:11px;margin-top:22px}
.pg-link{position:relative;min-height:54px;padding:0 54px;border-radius:var(--pg-radius);display:flex;align-items:center;justify-content:center;
  font-size:0.98rem;font-weight:600;background:var(--pg-btn-bg);color:var(--pg-btn-text);border:1.5px solid var(--pg-btn-border);
  transition:background 0.6s var(--ease),color 0.6s var(--ease),border-color 0.6s var(--ease),border-radius 0.6s var(--ease)}
.pg-link.is-feat{min-height:64px;font-size:1rem}
.pg-thumb{position:absolute;left:7px;top:7px;bottom:7px;aspect-ratio:1;border-radius:min(calc(var(--pg-radius) * 0.6),999px);
  background:linear-gradient(140deg,#FFD29D,#E1306C);display:flex;align-items:center;justify-content:center}
.pg-thumb svg{width:22px;height:22px;fill:#fff}
.pg-chev{position:absolute;right:20px;top:50%;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg)}
.pg-video{width:100%;border-radius:min(var(--pg-radius),18px);overflow:hidden;background:#111;transition:border-radius 0.6s var(--ease)}
.pg-video-img{position:relative;aspect-ratio:16/9;background:
  radial-gradient(circle at 70% 30%,#FFB37A 0,transparent 45%),linear-gradient(160deg,#C2410C,#3B0764)}
.pg-video-img::before{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(transparent,rgba(0,0,0,0.55))}
.pg-play{position:absolute;left:50%;top:50%;width:56px;height:40px;margin:-20px 0 0 -28px;border-radius:12px;background:#FF0033;display:flex;align-items:center;justify-content:center}
.pg-play::after{content:"";border-left:14px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}
.pg-video-cap{position:absolute;left:12px;right:12px;bottom:9px;text-align:left;color:#fff;font-size:0.82rem;font-weight:600}
.pg-foot{margin-top:auto;padding-top:14px;font-size:0.78rem;color:var(--pg-muted)}

.themes{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.themes button{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:999px;border:1px solid var(--border);
  background:var(--panel);color:var(--text-2);font:inherit;font-size:0.875rem;cursor:pointer;transition:border-color 0.2s ease,color 0.2s ease}
.themes button:hover{color:var(--text)}
.themes button[aria-pressed="true"]{border-color:var(--text);color:var(--text)}
.themes i{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2)}
.themes button:focus-visible{outline:2px solid var(--accent-l);outline-offset:2px}

/* Price comparison */
.lb-sec{padding:56px 0}
.lb-sec h2{max-width:16em}
.lb-sec .lead{color:var(--text-2);font-size:1.0625rem;margin-top:14px;max-width:38em}
.cmp{width:100%;margin-top:32px;border-collapse:collapse;font-size:0.9875rem}
.cmp th,.cmp td{padding:18px 16px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.cmp thead th{font-size:0.875rem;font-weight:500;color:var(--text-3)}
.cmp tbody th{font-weight:500}
.cmp td{color:var(--text-2)}
.cmp td.us{color:var(--text);font-weight:600}
.cmp-src{margin-top:14px;font-size:0.8125rem;color:var(--text-3)}

/* What's on the page: a plain two-column list, not cards */
.feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin-top:32px}
.feats div{padding:20px 0;border-top:1px solid var(--border)}
.feats strong{display:block;font-weight:600}
.feats span{display:block;margin-top:4px;color:var(--text-2);font-size:0.9375rem}

/* Three steps (a real sequence) */
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:32px}
.steps li{counter-increment:s}
.steps li::before{content:counter(s);display:inline-flex;width:34px;height:34px;border-radius:50%;border:1px solid var(--border-strong);align-items:center;justify-content:center;font-weight:600;font-size:0.9rem}
.steps strong{display:block;margin-top:16px;font-weight:600}
.steps span{display:block;margin-top:6px;color:var(--text-2);font-size:0.9375rem}

.final-card .claim{margin:32px auto 0;text-align:left}

@media (max-width:980px){
  .lb-grid{grid-template-columns:minmax(0,1fr)}
  .lb-side{justify-self:center}
}
@media (max-width:720px){
  .lb-hero{padding-top:112px}
  .feats,.steps{grid-template-columns:minmax(0,1fr)}
  .steps{gap:24px}
  .cmp thead{display:none}
  .cmp tr{display:block;padding:14px 0;border-bottom:1px solid var(--border)}
  .cmp th,.cmp td{display:block;border:0;padding:4px 0}
  .cmp td::before{content:attr(data-l);display:block;font-size:0.75rem;color:var(--text-3)}
  .claim-field{padding:16px 16px;font-size:1.25rem}
}
@media (prefers-reduced-motion:reduce){.claim-field{transition:none}}
.cmp-src a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px}