/* ============================================
   linkedinto.cv — landing

   Same design language as the extension panel: quiet neutrals, hairline borders,
   generous radii kept modest, shadows you notice only when they are gone. Colour is
   reserved for the one action that matters. Tokens are deliberately identical to
   sidepanel.css so the site and the product cannot drift apart.
   ============================================ */

:root {
  --bg-primary: #f7f7f8;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f1f3;
  --text-primary: #18181b;
  --text-secondary: #52525b;
  --text-tertiary: #a1a1aa;
  --border: #ececef;
  --border-strong: #e0e0e4;
  --accent: #0a66c2;
  --accent-hover: #004182;
  --accent-light: #e8f0fa;
  --radius-sm: 5px;
  --radius-md: 7px;
  --radius-lg: 9px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(24,24,27,0.04);
  --shadow-md: 0 4px 16px rgba(24,24,27,0.08);
  --shadow-lg: 0 12px 32px rgba(24,24,27,0.10);
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --fast: 140ms;
  --slow: 260ms;
  --page: 1080px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }

.skip {
  position: absolute; left: -9999px;
  background: var(--text-primary); color: #fff;
  padding: 10px 16px; border-radius: var(--radius-sm); z-index: 200;
}
.skip:focus { left: 12px; top: 12px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); }

/* ---------------------------------------------------------------- nav */

.nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 20px;
  max-width: var(--page); margin: 0 auto;
  padding: 14px 24px;
  background: rgba(247,247,248,0.82);
  backdrop-filter: saturate(180%) blur(12px);
}

.nav::after {
  content: ''; position: absolute; inset: auto 0 0; height: 1px; background: var(--border);
}

.nav-brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  color: var(--text-primary); text-decoration: none;
}
.nav-brand img { border-radius: var(--radius-sm); }

.nav-links { display: flex; gap: 22px; margin-left: auto; }
.nav-links a {
  font-size: 14px; color: var(--text-secondary); text-decoration: none;
  transition: color var(--fast) var(--ease);
}
.nav-links a:hover { color: var(--text-primary); }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px;
  border: none; border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 500; font-family: inherit;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-lg { padding: 15px 30px; font-size: 16px; }

/* Primary actions are black, secondary white. Blue is reserved for the pills and badges
   that mark what this works on, where it reads as LinkedIn's own colour. */
.btn-primary { background: var(--text-primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: #000; box-shadow: var(--shadow-md); }


.btn-ghost {
  background: var(--bg-secondary); color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.btn-ghost:hover { background: var(--bg-tertiary); }

/* ---------------------------------------------------------------- hero */

.hero {
  max-width: var(--page); margin: 0 auto;
  padding: 84px 24px 60px;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  padding: 5px 13px; margin-bottom: 22px;
  background: var(--bg-secondary); box-shadow: inset 0 0 0 1px var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 500; color: var(--text-secondary);
}

h1 {
  font-size: clamp(38px, 6vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin-bottom: 22px;
}

.lede {
  max-width: 620px; margin: 0 auto 30px;
  font-size: 18px; color: var(--text-secondary);
}
.lede strong { color: var(--text-primary); font-weight: 500; }

.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: 16px; font-size: 13.5px; color: var(--text-tertiary); }

/* A drawn stand-in for the product shot, so the page is never waiting on an asset. */
.hero-shot { margin-top: 56px; }

.shot-frame {
  display: grid; grid-template-columns: 1fr 320px; gap: 20px;
  max-width: 900px; margin: 0 auto; padding: 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  text-align: left;
}

.shot-panel {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
}
.shot-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.shot-pill.dark { margin-left: auto; background: var(--text-primary); color: #fff; }

/* The affordance that fetches the rest of a previewed section. */
.shot-get {
  margin-left: auto; padding: 2px 9px; border-radius: var(--radius-pill);
  background: var(--accent-light); color: var(--accent);
  font-size: 9.5px; font-weight: 500;
}
.shot-card.small b { font-size: 11.5px; }
.shot-card.small span { font-size: 10.5px; }
.shot-pill {
  padding: 3px 11px; border-radius: var(--radius-pill);
  background: var(--bg-tertiary); font-size: 11px; color: var(--text-secondary);
}
.shot-row { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; }
.shot-label { font-size: 10px; font-weight: 600; letter-spacing: 0.6px; color: var(--text-tertiary); }
.shot-count {
  font-size: 10px; padding: 1px 7px; border-radius: var(--radius-pill);
  background: var(--bg-tertiary); color: var(--text-tertiary);
}
.shot-card {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 9px 11px; margin-bottom: 7px;
  box-shadow: var(--shadow-sm);
}
.shot-card b { display: block; font-size: 12.5px; font-weight: 600; }
.shot-card span { display: block; font-size: 11.5px; color: var(--text-secondary); }
.shot-card i { display: block; font-size: 10.5px; font-style: normal; color: var(--text-tertiary); }
.shot-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.shot-tags em {
  font-style: normal; font-size: 10.5px; padding: 4px 10px;
  border-radius: var(--radius-pill); background: var(--accent-light); color: var(--accent);
}

/* A stand-in for the LinkedIn profile the panel is reading. Structure only: a cover,
   an avatar, and section cards, with real strings only where they tie the two halves
   of the picture together. */
.shot-profile { display: grid; gap: 10px; align-content: start; }

.pf-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px 16px;
  box-shadow: var(--shadow-sm);
}
.pf-top { padding: 0 0 16px; overflow: hidden; }

.pf-cover { height: 62px; background: linear-gradient(120deg, #dfe6ee, #eef2f6); }
.pf-id { padding: 0 16px; margin-top: -26px; }
.pf-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--bg-tertiary); border: 3px solid var(--bg-secondary);
  margin-bottom: 10px;
}
.pf-name { width: 42%; height: 13px; border-radius: 3px; background: var(--text-primary); margin-bottom: 8px; }

.pf-line { height: 8px; border-radius: 3px; background: var(--bg-tertiary); margin-bottom: 7px; }
.pf-line.pale { background: #f5f5f7; }
.pf-line.w100 { width: 100%; } .pf-line.w95 { width: 95%; } .pf-line.w70 { width: 70%; }
.pf-line.w60 { width: 60%; } .pf-line.w55 { width: 55%; } .pf-line.w50 { width: 50%; }
.pf-line.w45 { width: 45%; } .pf-line.w40 { width: 40%; } .pf-line.w38 { width: 38%; }
.pf-line.w32 { width: 32%; }

.pf-buttons { display: flex; gap: 7px; margin-top: 12px; }
.pf-btn { width: 62px; height: 22px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--border-strong); }
.pf-btn.solid { background: var(--accent); box-shadow: none; }

.pf-heading { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; }

.pf-entry { display: flex; gap: 11px; padding: 9px 0; border-top: 1px solid var(--border); }
.pf-entry:first-of-type { border-top: none; padding-top: 2px; }
.pf-logo { width: 30px; height: 30px; border-radius: 5px; background: var(--text-primary); flex-shrink: 0; }
.pf-logo.alt { background: var(--accent); }
.pf-entry-body { flex: 1; min-width: 0; }
.pf-entry-body b { display: block; font-size: 12px; font-weight: 600; }
.pf-entry-body i { display: block; font-size: 11.5px; font-style: normal; color: var(--text-secondary); margin-bottom: 6px; }

.pf-showall {
  margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-secondary); text-align: center;
}

/* ---------------------------------------------------------------- bands */

.band { max-width: var(--page); margin: 0 auto; padding: 72px 24px; }

h2 {
  font-size: clamp(27px, 3.4vw, 38px);
  line-height: 1.15; letter-spacing: -0.028em; font-weight: 600;
  margin-bottom: 14px;
}

.band-lede { max-width: 620px; font-size: 17px; color: var(--text-secondary); margin-bottom: 34px; }

.grid { display: grid; gap: 18px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); gap: 14px; }

.card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.card h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 8px; }
.card p { font-size: 14.5px; color: var(--text-secondary); }

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

.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.steps li {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm);
}
.step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-bottom: 14px;
  border-radius: var(--radius-pill);
  background: var(--text-primary); color: #fff;
  font-size: 12.5px; font-weight: 600;
}
.steps h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 7px; }
.steps p { font-size: 14.5px; color: var(--text-secondary); }

/* ---------------------------------------------------------------- templates */

.tpl { background: none; }
.tpl-art {
  aspect-ratio: 3 / 4;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  box-shadow: var(--shadow-sm);
  margin-bottom: 11px;
  position: relative; overflow: hidden;
  transition: box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.tpl:hover .tpl-art { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.tpl-art::before, .tpl-art::after { content: ''; position: absolute; }
.tpl-art.zurich::before { inset: 0 0 auto; height: 22%; background: var(--text-primary); }
.tpl-art.zurich::after  { inset: 32% 14% auto; height: 2px; background: var(--border-strong); }
.tpl-art.mono::before   { inset: 12% 14% auto; height: 6px; background: var(--text-primary); width: 44%; }
.tpl-art.mono::after    { inset: 26% 14% auto; height: 1px; background: var(--border-strong); }
.tpl-art.editorial::before { inset: 0 auto 0 0; width: 34%; background: var(--bg-tertiary); }
.tpl-art.editorial::after  { inset: 12% 10% auto 42%; height: 7px; background: var(--text-primary); }
.tpl-art.clean::before  { inset: 14% 16% auto; height: 7px; background: var(--text-primary); width: 40%; }
.tpl-art.contrast::before { inset: 0 0 0 auto; width: 38%; background: var(--text-primary); }
.tpl-art.contrast::after  { inset: 14% 46% auto 10%; height: 7px; background: var(--text-primary); }

.tpl figcaption b { display: block; font-size: 14px; font-weight: 600; }
.tpl figcaption span { display: block; font-size: 12.5px; color: var(--text-tertiary); }

/* ---------------------------------------------------------------- facts */


/* ---------------------------------------------------------------- pricing */

.plans { align-items: start; }
.plan {
  position: relative;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; height: 100%;
}
.plan-featured { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
/* Sits in the corner rather than in the flow: in the flow it pushed this card's
   heading and price down and the three prices stopped lining up. */
.plan-flag {
  position: absolute; top: 18px; right: 18px;
  padding: 3px 11px; border-radius: var(--radius-pill);
  background: var(--accent-light); color: var(--accent);
  font-size: 11.5px; font-weight: 500;
}
.plan h3 { font-size: 15px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.price { margin-bottom: 18px; }
.price b { font-size: 36px; font-weight: 600; letter-spacing: -0.03em; }
.price span { font-size: 13.5px; color: var(--text-tertiary); margin-left: 5px; }
.plan ul { list-style: none; margin-bottom: 22px; display: grid; gap: 9px; }
.plan li { font-size: 14.5px; color: var(--text-secondary); padding-left: 22px; position: relative; }
.plan li::before {
  content: ''; position: absolute; left: 4px; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--border-strong);
}
.plan .btn { margin-top: auto; width: 100%; }
.plan-note { margin-top: 20px; font-size: 13px; color: var(--text-tertiary); }

/* Written by script.js when a checkout link has not been configured yet. */
.buy-note { margin-top: 10px; font-size: 12.5px; color: var(--text-tertiary); }

/* ---------------------------------------------------------------- faq */

.faq { display: grid; gap: 9px; }
.faq details {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.faq details:hover { border-color: var(--border-strong); }
.faq details[open] { box-shadow: var(--shadow-sm); }

/* Padding sits on the summary rather than the card, so the whole surface of a closed
   question is the click target instead of just the line of text. */
.faq summary {
  padding: 17px 18px;
  font-size: 15.5px; font-weight: 500; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; font-size: 19px; font-weight: 400; color: var(--text-tertiary);
  transition: transform var(--slow) var(--ease); flex-shrink: 0;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 18px 17px; font-size: 14.5px; color: var(--text-secondary); }

/* ---------------------------------------------------------------- cta + foot */

.cta {
  max-width: var(--page); margin: 0 auto; padding: 84px 24px 92px; text-align: center;
}
.cta h2 { margin-bottom: 10px; }
.cta p { color: var(--text-secondary); margin-bottom: 26px; }
.cta-note { margin-top: 18px; font-size: 13px; color: var(--text-tertiary); }

.foot {
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
  padding: 26px 24px 30px;
}
.foot-inner {
  max-width: var(--page); margin-inline: auto;
  display: flex; align-items: center; gap: 10px 20px; flex-wrap: wrap;
}
.foot-brand {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14px; color: var(--text-primary); text-decoration: none;
}
.foot-brand img { border-radius: 4px; }
/* The byline sits with the brand, not among the navigation. */
.foot-by { font-size: 13.5px; color: var(--text-tertiary); }
.foot-by a { color: var(--text-secondary); text-decoration: none; }
.foot-by a:hover { color: var(--text-primary); }

.foot-links { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; }
.foot-links a { font-size: 14px; color: var(--text-secondary); text-decoration: none; }
.foot-links a:hover { color: var(--text-primary); }
.foot-legal {
  max-width: var(--page); margin: 18px auto 0;
  padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-tertiary);
}

/* ---------------------------------------------------------------- doc pages */

.doc-page { background: var(--bg-secondary); }
.doc-head { max-width: 720px; margin: 0 auto; padding: 26px 24px 0; }
.doc-back { font-size: 14px; color: var(--text-secondary); text-decoration: none; }
.doc-back:hover { color: var(--text-primary); }

.doc { max-width: 720px; margin: 0 auto; padding: 30px 24px 70px; }
.doc h1 { font-size: 38px; letter-spacing: -0.03em; margin-bottom: 6px; }
.doc-meta { font-size: 13.5px; color: var(--text-tertiary); margin-bottom: 28px; }
.doc-lead { font-size: 17.5px; color: var(--text-secondary); margin-bottom: 34px; }
.doc h2 { font-size: 20px; letter-spacing: -0.015em; margin: 34px 0 10px; }
.doc p { margin-bottom: 14px; color: var(--text-secondary); font-size: 15.5px; }
.doc ul { margin: 0 0 16px 20px; }
.doc li { margin-bottom: 8px; color: var(--text-secondary); font-size: 15.5px; }
.doc strong { color: var(--text-primary); font-weight: 600; }
.doc a { color: var(--accent); }
.doc code {
  background: var(--bg-tertiary); padding: 1px 6px; border-radius: var(--radius-sm); font-size: 14px;
}
.doc-note {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text-tertiary);
}
.doc-foot {
  border-top: 1px solid var(--border); padding: 24px;
  display: flex; gap: 20px; justify-content: center;
}
.doc-foot a { font-size: 13.5px; color: var(--text-secondary); text-decoration: none; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .shot-frame { grid-template-columns: 1fr; }
  .shot-profile { display: none; }
  .grid-3, .steps { grid-template-columns: 1fr; }
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .nav-links { display: none; }
}

@media (max-width: 560px) {
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .hero { padding-top: 56px; }
  .band { padding: 52px 20px; }
  .hero-actions .btn { width: 100%; }
}

/* The key handed over after checkout. */
.keybox {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 24px 0 8px; padding: 16px 18px;
  background: var(--bg-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
}
.keybox code {
  flex: 1; min-width: 220px;
  font-size: 14px; letter-spacing: 0.3px; word-break: break-all; color: var(--text-primary);
}
.hidden { display: none !important; }