/* YellowSync — landing page only. Loaded after app.css, on / alone.
   Sem estilos inline, sem recursos externos: a CSP é default-src 'self'. */

:root {
  --ys-ink: #1b1f23;        /* quase-preto do LinkedIn */
  --ys-ink-2: #3f4650;
  --ys-ink-3: #5e6873;
  --ys-ink-4: #8a939d;
  --ys-line: #dfe1e5;
  --ys-line-2: #edeef1;
  --ys-paper: #fff;
  --ys-ground: #f4f2ee;     /* fundo do feed do LinkedIn */
  --ys-blue: #0a66c2;       /* azul LinkedIn */
  --ys-blue-d: #004182;     /* azul carregado: hover e banda final */
  --ys-blue-t: #e8f0fb;     /* tinta clara do azul */
  --ys-yellow: #fff200;     /* SÓ para marcas de candidato contactado */
  --ys-r: 8px;
  --ys-r-lg: 14px;
  --ys-ease: cubic-bezier(.2, .65, .25, 1);
  --ys-t: 180ms;
  --ys-sh-1: 0 1px 1px rgba(27, 31, 35, .05), 0 3px 8px -3px rgba(27, 31, 35, .09);
  --ys-sh-2: 0 1px 1px rgba(27, 31, 35, .05), 0 8px 18px -8px rgba(27, 31, 35, .13),
             0 28px 56px -28px rgba(10, 66, 194, .18);
  --ys-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* o main do app.css é estreito e centrado; aqui as secções são de largura total */
main { max-width: none; margin: 0; padding: 0; }

.ys-wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

/* ---------- tipografia ---------- */
.ys-hero h1 {
  margin: 14px 0 0;
  font-size: clamp(2.3rem, 5.2vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -.038em;
  font-weight: 700;
  max-width: 13ch;
}
.ys-h2, .ys-split__head h2, .ys-cta h2 {
  margin: 12px 0 0;
  font-size: clamp(1.65rem, 3.1vw, 2.45rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  font-weight: 700;
  max-width: 20ch;
}
.ys-eyebrow {
  margin: 0;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ys-ink-4);
}
.ys-lead {
  margin: 22px 0 0;
  max-width: 44ch;
  font-size: 1.06rem;
  line-height: 1.62;
  color: var(--ys-ink-3);
  letter-spacing: -.005em;
}
.ys-lead--s { font-size: .98rem; max-width: 46ch; }
.ys-note {
  margin: 26px 0 0;
  max-width: 62ch;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--ys-ink-4);
}

/* ---------- botões ---------- */
.ys-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 30px 0 0; }
.ys-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ys-blue); color: #fff; text-decoration: none;
  padding: 11px 22px; border-radius: 999px;
  font-size: .93rem; font-weight: 600; letter-spacing: -.005em;
  box-shadow: var(--ys-sh-1);
  transition: transform var(--ys-t) var(--ys-ease), box-shadow var(--ys-t) var(--ys-ease),
              background var(--ys-t) var(--ys-ease), border-color var(--ys-t) var(--ys-ease);
}
.ys-btn:hover { transform: translateY(-1px); background: var(--ys-blue-d); box-shadow: var(--ys-sh-2); }
.ys-btn:active { transform: translateY(0); }
.ys-btn:focus-visible { outline: 2px solid var(--ys-blue); outline-offset: 3px; }
.ys-btn--ghost {
  background: transparent; color: var(--ys-blue); font-weight: 600;
  border: 1.5px solid var(--ys-blue); border-radius: 999px; box-shadow: none; padding: 9.5px 20px;
}
.ys-btn--ghost:hover { background: var(--ys-blue-t); border-color: var(--ys-blue-d); color: var(--ys-blue-d); transform: none; box-shadow: none; }
.ys-arrow { transition: transform var(--ys-t) var(--ys-ease); }
.ys-btn--ghost:hover .ys-arrow { transform: translateX(3px); }

/* ---------- hero ---------- */
.ys-hero {
  position: relative; overflow: hidden;
  padding: clamp(52px, 7vw, 104px) 0 clamp(36px, 5vw, 64px);
}
.ys-hero::before {
  content: ""; position: absolute; left: -10%; right: -10%; top: -26%; height: 78%;
  background: radial-gradient(52% 62% at 70% 38%, rgba(10, 102, 194, .13), rgba(10, 102, 194, 0) 68%);
  pointer-events: none;
}
.ys-hero__grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(30px, 5vw, 68px); align-items: center;
}
.ys-h-mark { position: relative; display: inline-block; white-space: nowrap; }
.ys-h-mark__fill {
  position: absolute; left: -.08em; right: -.08em; top: .1em; bottom: .08em;
  background: var(--ys-yellow); border-radius: 3px;
  transform: scaleX(0); transform-origin: left center;
}
.ys-rev.is-in .ys-h-mark__fill { animation: ys-sweep .8s var(--ys-ease) .3s forwards; }
.ys-h-mark__t { position: relative; }

.ys-facts {
  list-style: none; margin: clamp(38px, 6vw, 72px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid var(--ys-line);
}
.ys-facts li { padding: 20px 26px 0 0; font-size: .88rem; line-height: 1.5; color: var(--ys-ink-3); }
.ys-facts li::before {
  content: ""; display: block; width: 18px; height: 2px;
  background: var(--ys-blue); margin-bottom: 12px;
}

/* ---------- bandas ---------- */
.ys-band {
  background: var(--ys-paper);
  border-top: 1px solid var(--ys-line); border-bottom: 1px solid var(--ys-line);
  padding: clamp(64px, 8vw, 116px) 0;
}
.ys-how { padding: clamp(64px, 8vw, 116px) 0 clamp(24px, 3vw, 40px); }
.ys-expiry { padding: clamp(64px, 8vw, 116px) 0; }

.ys-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(30px, 5vw, 76px); align-items: start;
}

/* ---------- lista com filetes (o problema) ---------- */
.ys-ruled { list-style: none; margin: 0; padding: 0; }
.ys-ruled li {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px;
  padding: 22px 0; border-top: 1px solid var(--ys-line);
}
.ys-ruled li:last-child { border-bottom: 1px solid var(--ys-line); }
.ys-ruled__n {
  font-size: .72rem; font-weight: 600; color: var(--ys-ink-4);
  letter-spacing: .06em; font-variant-numeric: tabular-nums; padding-top: 4px;
}
.ys-ruled p { margin: 0; font-size: 1rem; line-height: 1.58; color: var(--ys-ink-2); }

/* ---------- passos ---------- */
.ys-step {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
  padding: clamp(40px, 5vw, 68px) 0; border-top: 1px solid var(--ys-line);
}
.ys-step:first-of-type { margin-top: clamp(28px, 4vw, 48px); }
.ys-step--flip .ys-step__text { order: 2; }
.ys-step__n {
  display: block; font-size: .72rem; font-weight: 600; color: var(--ys-ink-4);
  letter-spacing: .06em; font-variant-numeric: tabular-nums; margin-bottom: 14px;
}
.ys-step__text h3 { margin: 0 0 12px; font-size: 1.32rem; letter-spacing: -.024em; line-height: 1.2; }
.ys-step__text p { margin: 0; color: var(--ys-ink-3); font-size: .98rem; line-height: 1.62; max-width: 40ch; }

/* ---------- mock screens ---------- */
.ys-shot { margin: 0; position: relative; }
.ys-shot__label {
  display: flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 600; color: var(--ys-ink-4);
  letter-spacing: -.005em; margin-bottom: 11px;
}
.ys-pc {
  width: 13px; height: 9px; border: 1.5px solid var(--ys-ink-4); border-radius: 2px;
  position: relative; display: inline-block;
}
.ys-pc::after {
  content: ""; position: absolute; left: 50%; bottom: -4px; width: 7px; height: 2px;
  background: var(--ys-ink-4); transform: translateX(-50%);
}
.ys-shot__cap { margin: 12px 0 0; font-size: .72rem; color: var(--ys-ink-4); }
.ys-shot--hero .ys-win { transform: perspective(1400px) rotateY(-1.4deg); }

.ys-win {
  background: var(--ys-paper); border: 1px solid var(--ys-line);
  border-radius: var(--ys-r-lg); box-shadow: var(--ys-sh-2); overflow: hidden;
}
.ys-win__bar {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-bottom: 1px solid var(--ys-line-2);
  background: linear-gradient(180deg, #fdfdfc, #f7f6f3);
}
.ys-win__dots { display: inline-flex; gap: 5px; flex: none; }
.ys-win__dots i { width: 8px; height: 8px; border-radius: 50%; background: #e2e1dd; }
.ys-win__url {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px;
  font-family: var(--ys-mono); font-size: .64rem;
  color: var(--ys-ink-3); background: #f1f2f4; border-radius: 999px; padding: 4px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ys-li {
  flex: none; font-family: inherit; font-size: .56rem; font-weight: 800; letter-spacing: -.02em;
  background: var(--ys-blue); color: #fff; border-radius: 3px; padding: 1px 3px; line-height: 1.35;
}
.ys-win__u { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ys-win__ext {
  flex: none; font-size: .58rem; font-weight: 800; letter-spacing: .05em;
  color: var(--ys-ink); background: var(--ys-yellow); border-radius: 4px; padding: 3px 5px;
}
.ys-win__body { display: flex; gap: 14px; padding: 14px; }
.ys-win__body--duo { align-items: stretch; }

.ys-rail {
  display: flex; flex-direction: column; gap: 10px; width: 84px; flex: none;
  background: #fbfbf9; border: 1px solid var(--ys-line-2); border-radius: 9px; padding: 13px 11px;
  align-self: flex-start;
}
.ys-rail__b { height: 7px; border-radius: 3px; background: #ebeae6; }
.ys-rail__b:nth-child(2) { width: 74%; }
.ys-rail__b:nth-child(3) { width: 86%; }
.ys-rail__b:nth-child(4) { width: 62%; }

.ys-list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ys-list--tight { flex: 0 0 46%; }
.ys-row {
  position: relative; display: flex; align-items: center; gap: 11px;
  padding: 9px 8px; border-radius: 8px;
  transition: background var(--ys-t) var(--ys-ease);
}
.ys-row:hover { background: #fbfbf9; }
.ys-av {
  width: 27px; height: 27px; flex: none; border-radius: 50%;
  background: var(--ys-blue-t); color: var(--ys-blue);
  font-size: .58rem; font-weight: 700; letter-spacing: .03em;
  display: grid; place-items: center;
}
.ys-idt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ys-name { position: relative; display: inline-block; align-self: flex-start; }
.ys-name__t { position: relative; font-size: .82rem; font-weight: 600; letter-spacing: -.012em; }
.ys-mark {
  position: absolute; left: -5px; right: -5px; top: -2px; bottom: -2px;
  background: var(--ys-yellow); border-radius: 3px;
  transform: scaleX(0); transform-origin: left center;
}
.ys-rev.is-in .ys-row.is-marked .ys-mark { animation: ys-sweep .55s var(--ys-ease) forwards; }
.ys-rev.is-in .ys-row.is-clearing .ys-mark {
  transform-origin: right center; animation: ys-sweep-out .42s var(--ys-ease) forwards;
}
.ys-sub { font-size: .68rem; color: var(--ys-ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ys-tip {
  position: absolute; left: 46px; top: auto; bottom: calc(100% - 9px); z-index: 3;
  background: var(--ys-ink); color: #fff; font-size: .64rem; font-weight: 500;
  padding: 5px 9px; border-radius: 6px; white-space: nowrap; pointer-events: none;
  box-shadow: 0 6px 14px -6px rgba(20, 20, 20, .45); opacity: 0; transform: translateY(4px);
  transition: opacity .22s var(--ys-ease), transform .22s var(--ys-ease);
}
.ys-tip::after {
  content: ""; position: absolute; left: 14px; bottom: -3px; width: 6px; height: 6px;
  background: var(--ys-ink); transform: rotate(45deg);
}
.ys-row.is-tip .ys-tip, .ys-row:hover .ys-tip { opacity: 1; transform: translateY(0); }

.ys-sync {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .6rem; font-weight: 600; letter-spacing: .02em; color: var(--ys-ink-3);
  background: #fbfbf9; border: 1px solid var(--ys-line); border-radius: 20px;
  padding: 3px 9px 3px 7px; opacity: 0;
  transition: opacity .35s var(--ys-ease);
}
.ys-ping { width: 5px; height: 5px; border-radius: 50%; background: var(--ys-blue); flex: none; }
.ys-row.is-sync .ys-sync { opacity: 1; }
.ys-row[data-ys-sync] .ys-idt { padding-right: 74px; }
.ys-row.is-sync .ys-ping { animation: ys-ping 2.4s var(--ys-ease) infinite; }

/* compose (passo 02) */
.ys-compose {
  position: relative; flex: 1; min-width: 0;
  border-left: 1px solid var(--ys-line-2); padding: 12px 12px 14px 16px;
  display: flex; flex-direction: column; gap: 10px; min-height: 148px;
}
.ys-compose__to { font-size: .68rem; color: var(--ys-ink-4); }
.ys-compose__to b { color: var(--ys-ink); font-weight: 600; }
.ys-compose__line { height: 7px; border-radius: 4px; background: #f1f0ed; position: relative; }
.ys-compose__line--s { width: 68%; }
.ys-compose__line--m { width: 42%; }
.ys-caret {
  position: absolute; right: -6px; top: -4px; width: 1.5px; height: 14px;
  background: var(--ys-ink); animation: ys-blink 1.1s steps(1) infinite;
}
.ys-send {
  margin-top: auto; align-self: flex-start;
  background: var(--ys-blue); color: #fff; font-size: .68rem; font-weight: 600;
  padding: 7px 17px; border-radius: 999px;
  transition: transform 140ms var(--ys-ease), background 140ms var(--ys-ease);
}
.ys-shot.is-press .ys-send { transform: scale(.94); background: var(--ys-blue-d); }
.ys-cursor {
  position: absolute; left: 64%; top: 18%; opacity: 0; z-index: 4; line-height: 0;
  transition: left .8s var(--ys-ease), top .8s var(--ys-ease), opacity .3s var(--ys-ease);
}
.ys-shot.is-aim .ys-cursor { opacity: 1; left: 15%; top: 72%; }
.ys-shot.is-press .ys-cursor { opacity: 1; left: 13.5%; top: 70%; }
.ys-toast {
  position: absolute; right: 12px; top: 10px;
  display: flex; align-items: center; gap: 6px;
  background: var(--ys-ink); color: #fff; font-size: .62rem; font-weight: 600;
  padding: 5px 9px; border-radius: 6px; opacity: 0; transform: translateY(-5px);
  transition: opacity .25s var(--ys-ease), transform .25s var(--ys-ease);
}
.ys-toast::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--ys-yellow); }
.ys-shot.is-done .ys-toast { opacity: 1; transform: translateY(0); }

/* ---------- bento de benefícios ---------- */
.ys-bento {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px; margin-top: clamp(28px, 4vw, 46px);
}
.ys-card {
  background: var(--ys-paper); border: 1px solid var(--ys-line);
  border-radius: var(--ys-r-lg); padding: clamp(20px, 2.5vw, 30px);
  box-shadow: var(--ys-sh-1);
  transition: border-color var(--ys-t) var(--ys-ease), box-shadow var(--ys-t) var(--ys-ease),
              transform var(--ys-t) var(--ys-ease);
}
.ys-card:hover { border-color: #dcdad4; box-shadow: var(--ys-sh-2); transform: translateY(-2px); }
.ys-card h3 { margin: 0 0 10px; font-size: 1.02rem; letter-spacing: -.018em; line-height: 1.28; }
.ys-card p { margin: 0; font-size: .94rem; line-height: 1.6; color: var(--ys-ink-3); }
.ys-card--wide { grid-column: span 7; }
.ys-card--wide h3 { font-size: 1.24rem; letter-spacing: -.024em; max-width: 22ch; }
.ys-card--wide::before {
  content: ""; display: block; width: 26px; height: 3px; border-radius: 2px;
  background: var(--ys-blue); margin-bottom: 18px;
}
.ys-bento > .ys-card:nth-child(2) { grid-column: span 5; }
.ys-bento > .ys-card:nth-child(3) { grid-column: span 5; }
.ys-bento > .ys-card:nth-child(4) { grid-column: span 7; }

/* ---------- expiração ---------- */
.ys-time { list-style: none; margin: 0; padding: 0; }
.ys-time li {
  display: grid; grid-template-columns: 62px 112px minmax(0, 1fr);
  align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--ys-line);
}
.ys-time li:last-child { border-bottom: 1px solid var(--ys-line); }
.ys-time__d { font-size: .72rem; font-weight: 600; color: var(--ys-ink-4); font-variant-numeric: tabular-nums; }
.ys-chip {
  justify-self: start; font-size: .78rem; font-weight: 600; letter-spacing: -.012em;
  padding: 4px 9px; border-radius: 5px; background: var(--ys-yellow);
}
.ys-chip--f2 { background: #fff67e; }
.ys-chip--f3 { background: #fffcce; }
.ys-chip--f4 { background: transparent; color: var(--ys-ink-3); box-shadow: inset 0 0 0 1px var(--ys-line); }
.ys-rev.is-in .ys-chip--f2 { animation: ys-fade-2 1.1s var(--ys-ease) .35s both; }
.ys-rev.is-in .ys-chip--f3 { animation: ys-fade-3 1.1s var(--ys-ease) .5s both; }
.ys-rev.is-in .ys-chip--f4 { animation: ys-fade-4 1.1s var(--ys-ease) .65s both; }
.ys-time__t { font-size: .9rem; line-height: 1.5; color: var(--ys-ink-3); }

/* ---------- privacidade ---------- */
.ys-privacy {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; margin-top: clamp(28px, 4vw, 46px);
}
.ys-tick, .ys-cross { list-style: none; margin: 16px 0 0; padding: 0; }
.ys-tick li, .ys-cross li {
  position: relative; padding: 12px 0 12px 28px;
  border-top: 1px solid var(--ys-line-2);
  font-size: .92rem; line-height: 1.5; color: var(--ys-ink-2);
}
.ys-tick li::before {
  content: ""; position: absolute; left: 2px; top: 17px; width: 10px; height: 5px;
  border-left: 2px solid var(--ys-ink); border-bottom: 2px solid var(--ys-ink);
  transform: rotate(-45deg);
}
.ys-cross li::before, .ys-cross li::after {
  content: ""; position: absolute; left: 2px; top: 20px; width: 11px; height: 1.6px;
  background: var(--ys-ink-4);
}
.ys-cross li::before { transform: rotate(45deg); }
.ys-cross li::after { transform: rotate(-45deg); }
.ys-mono {
  margin: 18px 0 0; font-family: var(--ys-mono); font-size: .73rem; color: var(--ys-ink-3);
  background: #faf9f6; border: 1px solid var(--ys-line-2); border-radius: 8px;
  padding: 10px 12px; overflow-x: auto; white-space: nowrap;
}

/* ---------- CTA final ---------- */
.ys-cta { background: var(--ys-blue-d); color: #fff; padding: clamp(58px, 7vw, 100px) 0; }
.ys-cta__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(30px, 5vw, 72px); align-items: center;
}
.ys-cta h2 { color: #fff; }
.ys-cta .ys-eyebrow { color: #9dc2e8; }
.ys-cta .ys-btn { background: var(--ys-yellow); color: var(--ys-ink); box-shadow: none; }
.ys-cta .ys-btn:hover { background: #fff64a; transform: translateY(-1px); }
.ys-cta .ys-btn:focus-visible { outline-color: var(--ys-yellow); }
.ys-cta .ys-btn--ghost { background: transparent; color: #dbe9f7; border-color: rgba(255, 255, 255, .42); }
.ys-cta .ys-btn--ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: #fff; }
.ys-setup { list-style: none; margin: 0; padding: 0; }
.ys-setup li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: baseline;
  padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .2); color: #cfe2f4;
  font-size: .94rem; line-height: 1.5;
}
.ys-setup li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .2); }
.ys-setup__n { font-size: .7rem; font-weight: 600; color: #8fb8dd; letter-spacing: .06em; font-variant-numeric: tabular-nums; }

/* ---------- scroll reveal ---------- */
.ys-anim .ys-rev { opacity: 0; transform: translateY(16px); }
.ys-anim .ys-rev.is-in {
  opacity: 1; transform: none;
  transition: opacity .62s var(--ys-ease), transform .62s var(--ys-ease);
}
.ys-hero__text .ys-rev:nth-child(2).is-in { transition-delay: 60ms; }
.ys-hero__text .ys-rev:nth-child(3).is-in { transition-delay: 120ms; }
.ys-hero__text .ys-rev:nth-child(4).is-in { transition-delay: 180ms; }
.ys-hero__text .ys-rev:nth-child(5).is-in { transition-delay: 240ms; }
.ys-hero .ys-shot.is-in { transition-delay: 150ms; }
.ys-bento > .ys-rev:nth-child(2).is-in { transition-delay: 70ms; }
.ys-bento > .ys-rev:nth-child(3).is-in { transition-delay: 140ms; }
.ys-bento > .ys-rev:nth-child(4).is-in { transition-delay: 210ms; }
.ys-privacy > .ys-rev:nth-child(2).is-in { transition-delay: 90ms; }

/* ---------- keyframes ---------- */
@keyframes ys-sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ys-sweep-out { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes ys-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ys-ping {
  0% { box-shadow: 0 0 0 0 rgba(10, 102, 194, .35); }
  70% { box-shadow: 0 0 0 9px rgba(10, 102, 194, 0); }
  100% { box-shadow: 0 0 0 0 rgba(10, 102, 194, 0); }
}
@keyframes ys-fade-2 { from { background: #fff200; } to { background: #fff67e; } }
@keyframes ys-fade-3 { from { background: #fff200; } to { background: #fffcce; } }
@keyframes ys-fade-4 {
  from { background: #fff200; color: var(--ys-ink); }
  to { background: rgba(255, 242, 0, 0); color: var(--ys-ink-3); }
}

/* ---------- responsivo ---------- */
@media (max-width: 1000px) {
  .ys-hero__grid, .ys-step, .ys-split, .ys-cta__grid { grid-template-columns: minmax(0, 1fr); }
  .ys-hero h1 { max-width: 16ch; }
  .ys-step--flip .ys-step__text { order: 0; }
  .ys-shot--hero .ys-win { transform: none; }
  .ys-step__text p, .ys-lead { max-width: 56ch; }
}
@media (max-width: 860px) {
  .ys-card--wide, .ys-bento > .ys-card:nth-child(2),
  .ys-bento > .ys-card:nth-child(3), .ys-bento > .ys-card:nth-child(4) { grid-column: span 12; }
  .ys-privacy { grid-template-columns: minmax(0, 1fr); }
  .ys-facts { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .ys-facts li { border-top: 1px solid var(--ys-line); padding: 16px 0 0; margin-bottom: 8px; }
}
@media (max-width: 620px) {
  .ys-wrap { padding: 0 20px; }
  .ys-win__body { gap: 10px; padding: 11px; }
  .ys-rail { display: none; }
  .ys-win__body--duo { flex-direction: column; }
  .ys-list--tight { flex: none; }
  .ys-compose { border-left: 0; border-top: 1px solid var(--ys-line-2); padding: 12px 2px 4px; min-height: 128px; }
  .ys-cursor { left: 60%; }
  .ys-shot.is-aim .ys-cursor { left: 18%; top: 76%; }
  .ys-shot.is-press .ys-cursor { left: 16.5%; top: 74%; }
  .ys-time li { grid-template-columns: 56px minmax(0, 1fr); row-gap: 6px; }
  .ys-time__t { grid-column: 2; }
  .ys-actions .ys-btn { width: 100%; justify-content: center; }
}
@media (max-width: 430px) {
  .ys-wrap { padding: 0 16px; }
  .ys-hero h1 { font-size: 2.05rem; letter-spacing: -.03em; }
  .ys-tip { left: 8px; font-size: .6rem; padding: 4px 7px; }
  .ys-tip::after { left: 12px; }
  .ys-sub { font-size: .64rem; }
  .ys-name__t { font-size: .78rem; }
  .ys-card { padding: 20px 18px; }
  .ys-mono { font-size: .66rem; }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .ys-anim .ys-rev { opacity: 1; transform: none; }
  .ys-h-mark__fill, .ys-row.is-marked .ys-mark { transform: scaleX(1); }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* sem JS o conteúdo fica visível na mesma */
@media (scripting: none) {
  .ys-rev { opacity: 1 !important; transform: none !important; }
  .ys-h-mark__fill, .ys-row.is-marked .ys-mark { transform: scaleX(1); }
}

/* ---------- aviso legal de marca (fim da página, sobre o fundo escuro) ---------- */
.ys-disclaimer {
  margin: 42px 0 0;
  max-width: 68ch;
  font-size: .76rem;
  line-height: 1.6;
  color: #9dc2e8;
}

/* ---------- realce inline do amarelo dentro de texto corrido ----------
   Ensina a ideia na primeira frase: a palavra "yellow" vem pintada de amarelo. */
.ys-hl {
  background: var(--ys-yellow); color: var(--ys-ink); font-weight: 600;
  padding: 0 5px; border-radius: 3px; box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.ys-lead strong { color: var(--ys-ink); font-weight: 600; }
.ys-kicker {
  margin: 14px 0 0; font-size: .95rem; line-height: 1.55; color: var(--ys-ink-3);
  max-width: 44ch;
}

/* ---------- preço ---------- */
.ys-price { padding: clamp(64px, 8vw, 116px) 0; }
.ys-price__card { padding: clamp(24px, 3vw, 34px); }
.ys-card p.ys-price__eur {
  margin: 0 0 4px; font-size: 2.6rem; font-weight: 700; letter-spacing: -.035em;
  line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--ys-ink);
}
.ys-card p.ys-price__eur span {
  display: block; margin-top: 6px; font-size: .86rem; font-weight: 500;
  letter-spacing: -.005em; color: var(--ys-ink-3);
}
.ys-price__card .ys-tick { margin-top: 14px; }
.ys-price__card .ys-actions { margin-top: 22px; }
.ys-price__card .ys-btn { width: 100%; justify-content: center; }