/* site.css: the public website, built from the Figma website frames (1440 px wide, 120 px side padding, Plus Jakarta Sans). Loaded only by
   layout/site.html. Sizes are the design's own; below 1200 px the padding shrinks, the grids fold and the floating mock-ups stack.
   Every section has its own scroll movement (data-reveal) and all motion is off for "reduce motion".
   It holds: the website frame and its sections. It must not hold: app screens (pages.css) or the app tokens (tokens.css). */
.site {
  --bg-page: #F7F8FF; --bg-card: #FFFFFF; --bg-surface: #E6E0FF; --bg-surface-soft: #F0ECFF; --bg-surface-strong: #CFC6FF;
  --brand-primary: #0D0B2D; --brand-violet: #7160F2; --brand-accent-strong: #4A3CE6; --brand-secondary: #A78BFA;
  --text-secondary: #4B4872; --text-tertiary: #6B6892; --border-default: #DDD8F5; --border-strong: #C8C0F2; --border-input: #8F8BB5;
  --side: clamp(20px, 8.333vw, 120px);
  background: var(--bg-page); color: var(--brand-primary); font-family: var(--font); line-height: normal; margin: 0;
}
.site { overflow-x: clip; } .site * { box-sizing: border-box; }
.site h1, .site h2, .site h3, .site p { margin: 0; }
.site a { color: inherit; text-decoration: none; }
.site img { display: block; }
.site a:focus-visible, .site summary:focus-visible, .menu-btn:focus-visible { outline: 3px solid var(--brand-accent-strong); outline-offset: 2px; border-radius: 8px; }
.s-pad { padding: 156px var(--side); }
.s-pad.p148 { padding-block: 148px; } .s-pad.p140 { padding-block: 140px; } .s-pad.p108 { padding-block: 108px; } .s-pad.p100 { padding-block: 100px; }
.center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.stack28 { display: flex; flex-direction: column; gap: 28px; }
.bg-card { background: var(--bg-card); } .bg-surface { background: var(--bg-surface); } .bg-strong { background: var(--bg-surface-strong); } .bg-dark { background: var(--brand-primary); }

/* type */
.h-xl { font-size: clamp(34px, 4vw, 56px); line-height: 1.107; font-weight: 800; letter-spacing: -0.02em; }
.h-l { font-size: clamp(28px, 3vw, 40px); line-height: 46px; font-weight: 800; letter-spacing: -0.012em; }
.lead { font-size: 18px; line-height: 28px; color: var(--text-secondary); }
.lead-20 { font-size: 20px; line-height: 28px; color: var(--text-secondary); }
.w-960 { max-width: 960px; } .w-900 { max-width: 900px; } .w-820 { max-width: 820px; } .w-760 { max-width: 760px; } .w-720 { max-width: 720px; } .w-660 { max-width: 660px; } .w-640 { max-width: 640px; } .w-620 { max-width: 620px; }

/* buttons: Button/Primary, Button/Ghost, Button/Secondary of the design */
.sbtn { display: inline-flex; align-items: center; justify-content: center; font: 600 15px/22px var(--font); padding: 16px 26px; border-radius: 14px; border: 0; cursor: pointer; white-space: nowrap;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease); }
.sbtn.sm { padding: 11px 18px; border-radius: 12px; }
.sbtn.primary { background: var(--brand-violet); color: #fff; }
.sbtn.primary:hover { background: var(--brand-accent-strong); box-shadow: 0 8px 20px rgba(113, 96, 242, 0.35); transform: translateY(-1px); }
.sbtn.ghost { background: var(--bg-card); color: var(--brand-primary); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.sbtn.ghost:hover { background: var(--bg-surface-soft); }
.sbtn.secondary { background: var(--bg-surface); color: var(--brand-primary); }
.sbtn.secondary:hover { background: var(--bg-surface-strong); }
/* working state of every website button (checkout, contact, auth): a spinner, a progress cursor, and no second click while the request runs */
.sbtn[aria-busy="true"], .linklike[aria-busy="true"] { cursor: progress; pointer-events: none; opacity: 0.85; gap: 10px; }
.sbtn[aria-busy="true"]::before, .linklike[aria-busy="true"]::before { content: ""; flex: none; width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; margin-right: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: cp-spin 0.7s linear infinite; }
@keyframes cp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sbtn[aria-busy="true"]::before, .linklike[aria-busy="true"]::before { animation-duration: 1.6s; } }
.sbtn.full { width: 100%; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* chips and badges */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--bg-surface); color: var(--brand-accent-strong); font: 600 12px/normal var(--font); white-space: nowrap; }
.pill img { width: 11px; height: 11px; }
.pill.lg { padding: 7px 14px; font-size: 13px; }
.pill.mid { padding: 6px 12px; font-size: 13px; gap: 6px; } .pill.mid img { width: 12px; height: 12px; }
.pill.on { background: var(--brand-violet); color: #fff; }
.pill.line { background: var(--bg-card); box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--brand-primary); }
.pill.line.soft { color: var(--text-secondary); }
.pill.white { background: var(--bg-card); }
.pill.dark { background: var(--brand-primary); color: #fff; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills.tight { gap: 0 8px; }
.pills.mid-center { justify-content: center; }
.badge { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: var(--bg-surface-soft); font: 600 11px/16px var(--font); color: var(--text-secondary); white-space: nowrap; }

/* top bar (Nav): 22 px 120 px, links 15 px medium, ghost + primary buttons; the mobile menu is a checkbox (no script) */
.site-bar { position: relative; z-index: 30; }
.bar-row { display: flex; align-items: center; gap: 32px; padding: 22px var(--side); }
.brand-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; color: var(--brand-primary); }
.brand-logo img { width: 34px; height: 34px; }
.site-nav { display: flex; align-items: center; gap: 32px; flex: 1; justify-content: flex-end; }
.site-nav > a { font: 500 15px/normal var(--font); color: var(--text-secondary); transition: color 140ms var(--ease); }
.site-nav > a:hover { color: var(--brand-accent-strong); }
.site-nav > a[aria-current] { font-weight: 600; color: var(--brand-accent-strong); }
.bar-cta { display: flex; gap: 32px; align-items: center; }
.menu-check, .menu-btn { display: none; }
@media (max-width: 1100px) {
  .bar-row { justify-content: space-between; }
  .menu-btn { display: grid; gap: 5px; padding: 12px 10px; cursor: pointer; margin-left: auto; }
  .menu-btn span { width: 22px; height: 2px; background: var(--brand-primary); transition: transform 200ms var(--ease), opacity 200ms var(--ease); }
  .menu-check:checked ~ .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-check:checked ~ .menu-btn span:nth-child(2) { opacity: 0; }
  .menu-check:checked ~ .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-nav { position: absolute; inset: 78px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--border-default);
    padding: 12px var(--side) 20px; opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden; transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 0s 200ms; }
  .menu-check:checked ~ .site-nav { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
  .site-nav > a { padding: 12px 0; }
  .bar-cta { gap: 12px; margin-top: 12px; } .bar-cta .sbtn { flex: 1; }
}

/* hero: the art sits behind the section; the text rises in once on load */
.hero { position: relative; overflow: hidden; gap: 28px; min-height: clamp(620px, calc(100vh - 88px), 900px); justify-content: center; }
.hero-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hero > *:not(.hero-art) { position: relative; z-index: 1; }
.hero-rise > * { animation: rise 700ms var(--ease) both; }
.hero-rise > :nth-child(2) { animation-delay: 90ms; } .hero-rise > :nth-child(3) { animation-delay: 180ms; } .hero-rise > :nth-child(4) { animation-delay: 260ms; } .hero-rise > :nth-child(5) { animation-delay: 330ms; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.note-14 { font-size: 14px; color: var(--text-tertiary); }

/* absolutely placed mock-ups (hero cards, template fan): the design's own pixel layout, shrunk with zoom on smaller screens */
.stage { position: relative; margin-inline: auto; text-align: left; }
.stage.hero-stage { width: 1200px; height: 470px; }
.stage.tpl-stage { width: 1136px; height: 489px; }
.stage > * { position: absolute; }
@media (max-width: 1240px) { .stage { zoom: 0.85; } }
@media (max-width: 1100px) { .stage { zoom: 0.7; } }
@media (max-width: 900px) { .stage { zoom: 0.55; } }
@media (max-width: 720px) { .stage.hero-stage { zoom: 1; width: 100%; height: auto; display: flex; flex-direction: column; align-items: center; gap: 20px; } .stage.hero-stage > * { position: static; transform: none !important; } .stage.tpl-stage { zoom: 0.46; } }
@media (max-width: 480px) { .stage.tpl-stage { zoom: 0.3; } }
.float-a { animation: float 7s ease-in-out infinite; } .float-b { animation: float 8s 1s ease-in-out infinite reverse; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* hero mock: resume card, ATS tile, email card */
.m-resume { left: 170px; top: 0; width: 375px; display: flex; flex-direction: column; gap: 10px; padding: 30px; background: #fff; border: 1.25px solid var(--border-default); border-radius: 7.5px; box-shadow: 0 15px 40px rgba(13, 10, 46, 0.1); }
.m-name { font: 800 27.5px/normal var(--font); color: var(--brand-accent-strong); letter-spacing: -0.275px; }
.m-label { font: 700 13.75px/normal var(--font); color: var(--brand-accent-strong); }
.m-skills { display: flex; flex-wrap: wrap; gap: 0 6.25px; }
.m-skill { display: inline-flex; align-items: center; gap: 6.25px; padding: 5px 12.5px; border-radius: 999px; background: var(--bg-surface); color: var(--brand-accent-strong); font: 600 15px/normal var(--font); margin-bottom: 0; }
.m-skill img { width: 13.75px; height: 13.75px; }
.m-skill.line { background: #fff; box-shadow: inset 0 0 0 1.25px var(--border-strong); color: var(--text-secondary); }
.m-pn { font: 700 17.6px/26px var(--font); color: var(--brand-primary); }
.m-pt { font: 400 17.6px/26px var(--font); color: var(--text-secondary); white-space: pre-wrap; }
.m-ats { left: 570px; top: 250px; width: 240px; padding: 26.4px; border-radius: 24px; background: var(--brand-primary); box-shadow: 0 14.4px 38.4px rgba(13, 10, 46, 0.1); display: flex; flex-direction: column; gap: 7.2px; }
.m-ats strong { font: 800 76.8px/normal var(--font); letter-spacing: -2.304px; color: #fff; }
.m-ats span { font: 500 15.6px/normal var(--font); color: var(--bg-surface); width: 180px; }
.m-mail { left: 720px; top: 40px; width: 360px; padding: 24px; border-radius: 21.6px; background: var(--bg-surface); box-shadow: 0 14.4px 38.4px rgba(13, 10, 46, 0.1); display: flex; flex-direction: column; gap: 9.6px; }
.m-mail b { font: 600 14.4px/normal var(--font); color: var(--brand-accent-strong); }
.m-mail span { font: 500 16.8px/25.2px var(--font); }

/* "What is Career Pulse": three step cards with number badges and a connecting line */
.what-steps { display: flex; gap: 28px; width: 100%; align-items: stretch; }
.what-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; background: var(--bg); border-radius: 20px; padding: 36px 28px 32px; border: 1px solid var(--border); transition: transform 220ms var(--ease), box-shadow 220ms var(--ease); }
.what-step:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(13, 10, 46, 0.10); }
.what-step .ring { width: 80px; height: 80px; border-radius: 50%; background: var(--bg-surface); display: grid; place-items: center; }
.what-step .ring img { width: 36px; height: 36px; }
.what-step h3 { font: 800 24px/30px var(--font); max-width: 320px; }
.what-step p { font: 400 16px/25px var(--font); color: var(--text-secondary); max-width: 320px; }
.what-step small { font: 600 14px/20px var(--font); color: var(--brand-accent-strong); opacity: 0.8; max-width: 280px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); }
.in-short { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; padding: 22px 36px; border-radius: 999px; background: var(--bg-surface); font-size: 20px; }
.in-short b:first-child { font-weight: 800; color: var(--brand-accent-strong); } .in-short b:last-child { font-weight: 700; line-height: 26px; }
@media (max-width: 900px) { .what-steps { flex-direction: column; align-items: center; max-width: 420px; margin: 0 auto; } .what-steps::before { display: none; } .what-step { width: 100%; } }

/* services: six cards, alternating tinted and white */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; grid-auto-rows: 1fr; width: 100%; }
.svc { display: flex; flex-direction: column; gap: 14px; padding: 30px; border-radius: 24px; background: var(--bg-surface); transition: transform 220ms var(--ease), box-shadow 220ms var(--ease); }
.svc.white { background: var(--bg-card); box-shadow: inset 0 0 0 1px var(--border-default); }
.svc:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(13, 10, 46, 0.1); }
.svc .ico { width: 60px; height: 60px; border-radius: 30px; background: #fff; display: grid; place-items: center; }
.svc.white .ico { background: var(--bg-surface); }
.svc .ico img { width: 27px; height: 27px; }
.svc h3 { font: 800 24px/30px var(--font); letter-spacing: -0.12px; }
.svc p { font: 400 17px/26px var(--font); color: var(--text-secondary); }
.svc .tag { align-self: flex-start; padding: 7px 14px; border-radius: 999px; background: #fff; color: var(--brand-accent-strong); font: 600 13px/normal var(--font); margin-top: auto; }
.svc.white .tag { background: var(--bg-surface); }
@media (max-width: 1000px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .svc-grid { grid-template-columns: 1fr; } }

/* job radar search mock */
.radar-bar { width: 100%; display: flex; gap: 10px; align-items: center; padding: 10px; background: #fff; border: 1px solid var(--border-default); border-radius: 20px; box-shadow: 0 12px 32px rgba(13, 10, 46, 0.1); }
.radar-bar .field-box { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 14px; background: var(--bg-surface-soft); font-weight: 600; }
.radar-bar .field-box small { font-size: 11px; color: var(--text-tertiary); } .radar-bar .field-box span { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.looking { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; width: 100%; margin-top: 16px; }
.looking > span { font: 500 13px/normal var(--font); color: var(--text-tertiary); }
.looking .pill { padding: 4px 10px; margin: 2px 0; }
.job-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; margin-top: 16px; }
.job { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 18px; background: #fff; border: 1px solid var(--border-default); border-radius: 16px; transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.job:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(13, 10, 46, 0.1); }
.job h3 { font: 700 18px/normal var(--font); } .job p { font: 400 13px/normal var(--font); color: var(--text-secondary); }
.looking .found { margin-left: auto; font: 600 13px/normal var(--font); color: var(--brand-accent-strong); }
.job[hidden] { display: none; }
.job-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; }
.job .lvl { font: 600 12px/normal var(--font); color: var(--brand-accent-strong); }
.job .fit { width: 100%; height: 6px; border-radius: 3px; background: var(--bg-surface); overflow: hidden; margin-top: 4px; } .job .fit i { display: block; height: 100%; border-radius: 3px; background: var(--brand-violet); }
.job small { font: 500 12px/normal var(--font); color: var(--text-tertiary); margin-bottom: 4px; }
button.pill { border: 0; cursor: pointer; font-family: var(--font); } button.pill:focus-visible { outline: 2px solid var(--brand-violet); outline-offset: 2px; }
@media (max-width: 900px) { .looking .found { margin-left: 0; width: 100%; } .job-row { grid-template-columns: 1fr; } .radar-bar { flex-direction: column; align-items: stretch; } }

/* resume template fan */
.tpl { background: #fff; border: 0.908px solid #E4E4EF; border-radius: 7.262px; box-shadow: 0 9.077px 23.6px rgba(13, 10, 46, 0.14); width: 236px; height: 371px; padding: 17.7px; display: flex; flex-direction: column; gap: 4.248px; overflow: hidden;
  font: 400 9.44px/12.254px var(--tpl-font); color: var(--tpl-ink); }
.tpl.nova { padding: 22.42px; gap: 6.136px; }
.tpl.sel { border: 1.815px solid var(--brand-violet); }
.tpl-head { display: flex; justify-content: space-between; align-items: flex-end; }
.tpl-name { font-size: var(--tpl-name-size, 22.42px); line-height: normal; color: var(--tpl-accent); font-weight: var(--tpl-name-weight, 700); letter-spacing: var(--tpl-name-ls, 0); }
.tpl-sub { font-size: 12px; line-height: normal; color: var(--tpl-sub); font-style: var(--tpl-sub-style, normal); }
.tpl-contact { color: var(--tpl-muted); line-height: normal; }
.tpl-rule { height: 1.815px; background: var(--tpl-rule); flex: none; }
.tpl-sec { display: flex; flex-direction: column; gap: 1.452px; } .tpl-sec b { font-size: 9.894px; line-height: normal; color: var(--tpl-sec-color); letter-spacing: var(--tpl-sec-ls, 0.5px); font-weight: 600; } .tpl-sec i { display: block; height: 0.908px; background: var(--tpl-line); }
.tpl-row { display: flex; justify-content: space-between; } .tpl-row b { font-size: 10.166px; font-weight: var(--tpl-bold, 700); } .tpl-row span { color: var(--tpl-date); text-align: right; }
.tpl.center-head .tpl-head { flex-direction: column; align-items: center; text-align: center; gap: 2.36px; }
.tpl { transition: scale 400ms var(--ease), translate 400ms var(--ease), box-shadow 400ms var(--ease); }
.tpl.sel { z-index: 5; scale: 1.12; translate: var(--cx, 0px) -10px; box-shadow: 0 18px 40px rgba(13, 10, 46, 0.25); }
.pos-silicon { --cx: 431px; } .pos-oxford { --cx: 215px; } .pos-nova { --cx: -216px; } .pos-monarch { --cx: -427px; }
.pos-silicon { left: 18.7px; top: 74.6px; transform: rotate(-6deg); } .pos-oxford { left: 234.5px; top: 57.6px; transform: rotate(-3deg); } .pos-apex { left: 450px; top: 14px; z-index: 2; }
.pos-nova { left: 665.7px; top: 69.9px; transform: rotate(3deg); } .pos-monarch { left: 876.7px; top: 99.3px; transform: rotate(6deg); }
.tpl-names { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; }

/* dashboard numbers on dark */
.stat-row, .more-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; width: 100%; }
@media (max-width: 1000px) { .stat-row, .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .stat-row, .more-grid { grid-template-columns: 1fr; } }
.stat { min-height: 239px; padding: 24px; border-radius: 22px; background: #191740; border: 1px solid rgba(113, 96, 242, 0.45); display: flex; flex-direction: column; gap: 10px; color: #fff; }
.stat.hot { background: var(--brand-violet); border: 0; }
.stat small { font: 700 11px/normal var(--font); letter-spacing: 1.32px; color: var(--brand-secondary); } .stat.hot small { color: #fff; }
.stat strong { font: 800 64px/normal var(--font); letter-spacing: -2.56px; }
.stat .bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); overflow: hidden; } .stat.hot .bar { background: rgba(255, 255, 255, 0.3); }
.stat .bar i { display: block; height: 6px; border-radius: 3px; background: var(--brand-violet); transform-origin: left; animation: grow 1.2s 300ms var(--ease) both; } .stat.hot .bar i { background: #fff; }
.stat span { font: 500 14px/normal var(--font); color: var(--bg-surface); } .stat.hot span { color: #fff; }
.stat.hot .gmail, .stat .gmail { color: var(--brand-primary); display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--brand-primary); font: 700 13px/normal var(--font); }
.stat .gmail img { width: 16px; height: 16px; }
@keyframes grow { from { transform: scaleX(0); } to { transform: none; } }

/* "Want to know more" cards */
.more { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: #fff; border: 1px solid var(--border-default); border-radius: 20px; transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.more:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(13, 10, 46, 0.12); }
.more h3 { font: 700 20px/26px var(--font); } .more p { font: 400 15px/22px var(--font); color: var(--text-secondary); }
.more .go { display: flex; gap: 6px; align-items: center; font: 700 14px/normal var(--font); color: var(--brand-accent-strong); } .more .go img { width: 16px; height: 16px; transition: transform 200ms var(--ease); } .more:hover .go img { transform: translateX(4px); }

/* closing call to action and footer */
.cta-row { display: flex; align-items: center; gap: 48px; }
.cta-row > div:first-child { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.cta-row p { font-size: 17px; line-height: 28px; color: var(--text-secondary); max-width: 660px; }
@media (max-width: 800px) { .cta-row { flex-direction: column; align-items: flex-start; } }
.site-foot { background: var(--brand-primary); padding: 64px var(--side) 36px; display: flex; flex-direction: column; gap: 32px; border-top: 3px solid var(--brand-violet); }
.foot-top { display: grid; grid-template-columns: 2fr repeat(4, minmax(110px, 1fr)); gap: 40px; align-items: start; }
.foot-brand { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.foot-brand .brand-logo { color: #fff; } .foot-brand .brand-logo img { width: 32px; height: 32px; }
.foot-brand p { font-size: 14px; line-height: 22px; color: var(--bg-surface); max-width: 340px; }
.foot-cta { align-self: flex-start; margin-top: 6px; background: var(--brand-violet); color: #fff; }
.foot-col { display: flex; flex-direction: column; gap: 12px; font-size: 14px; white-space: nowrap; }
.foot-col b { font-weight: 600; color: #fff; } .foot-col a { color: var(--bg-surface); transition: color 140ms var(--ease); } .foot-col a:hover { color: #fff; }
.foot-rule { height: 1px; background: var(--brand-secondary); opacity: 0.4; }
.foot-bottom { display: flex; justify-content: center; text-align: center; align-items: center; gap: 16px 32px; flex-wrap: wrap; }
.foot-note { font-size: 13px; color: var(--bg-surface); max-width: 640px; } .foot-copy { font-size: 13px; color: var(--bg-surface); opacity: 0.8; }
@media (max-width: 900px) { .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; } .foot-brand { grid-column: 1 / -1; } }

/* How it works */
.promise { background: var(--brand-primary); color: #fff; border-radius: 24px; padding: 28px 40px; max-width: 860px; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.promise h2 { font: 800 30px/38px var(--font); } .promise p { font: 400 17px/26px var(--font); color: var(--bg-surface); }
.flow5 { display: flex; width: 100%; max-width: 1100px; }
.flow5 .node { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.flow5 .dot { width: 64px; height: 64px; border-radius: 32px; background: #fff; border: 2px solid var(--brand-violet); display: grid; place-items: center; font: 800 24px/normal var(--font); color: var(--brand-accent-strong); }
.flow5 .dot.fill { background: var(--brand-violet); color: #fff; }
.flow5 .node b { font: 700 16px/normal var(--font); width: 140px; text-align: center; }
.flow5 .link { flex: 1; padding-top: 31px; } .flow5 .link i { display: block; height: 2px; background: var(--bg-surface-strong); }
@media (max-width: 800px) { .flow5 .node b { width: 70px; font-size: 13px; } .flow5 .dot { width: 48px; height: 48px; font-size: 18px; } .flow5 .link { padding-top: 23px; } }
@media (max-width: 480px) { .flow5 .node { flex: none; gap: 8px; } .flow5 .node b { width: 50px; font-size: 11px; line-height: 14px; } .flow5 .dot { width: 36px; height: 36px; font-size: 15px; } .flow5 .link { padding-top: 17px; min-width: 2px; } }
.cols3 { display: flex; width: 100%; }
.cols3 > div { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 0 40px; } .cols3 > div:first-child { padding-left: 0; } .cols3 > div + div { border-left: 1px solid var(--border-strong); }
.cols3 .big { font: 800 140px/normal var(--font); letter-spacing: -5.6px; color: var(--bg-surface-strong); }
.cols3 h3 { font: 700 22px/normal var(--font); } .cols3 p { font: 400 15px/23px var(--font); color: var(--text-secondary); max-width: 300px; }
@media (max-width: 800px) { .cols3 { flex-direction: column; } .cols3 > div { padding: 24px 0; } .cols3 > div + div { border-left: 0; border-top: 1px solid var(--border-strong); } .cols3 .big { font-size: 90px; } }
.job-step { display: flex; gap: 28px; align-items: stretch; }
.job-step .rail { display: flex; flex-direction: column; align-items: center; }
.job-step .num { width: 56px; height: 56px; border-radius: 28px; background: var(--brand-violet); color: #fff; display: grid; place-items: center; font: 700 22px/normal var(--font); flex: none; }
.job-step .rail i { flex: 1; width: 2px; background: var(--bg-surface-strong); }
.job-step .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding-bottom: 64px; align-items: flex-start; }
.job-step h3 { font: 800 30px/36px var(--font); letter-spacing: -0.24px; }
.job-step .body > p { font: 400 17px/26px var(--font); color: var(--text-secondary); max-width: 680px; }
.demo { width: 100%; display: flex; justify-content: center; padding: 28px; border-radius: 22px; background: var(--bg-surface); } .demo.soft { background: var(--bg-surface-soft); }
.demo-card { background: #fff; border: 1.45px solid var(--border-default); border-radius: 26.1px; padding: 29px; box-shadow: 0 17.4px 46.4px rgba(13, 10, 46, 0.1); display: flex; flex-direction: column; gap: 17.4px; width: 100%; max-width: 754px; }
.demo-card.w667 { max-width: 667px; }
.demo-card .row { display: flex; align-items: center; gap: 11.6px; }
.demo-card h4 { margin: 0; flex: 1; font: 700 23.2px/normal var(--font); }
.meter-8 { height: 8.7px; border-radius: 4.35px; background: var(--bg-surface); overflow: hidden; } .meter-8 i { display: block; width: 70%; height: 100%; border-radius: 4.35px; background: var(--brand-violet); transform-origin: left; animation: grow 1.4s var(--ease) both; }
.cat { background: var(--bg-surface-soft); border-radius: 17.4px; padding: 17.4px; display: flex; flex-direction: column; gap: 11.6px; } .cat b { font: 600 18.85px/normal var(--font); }
.cat .row-pills { display: flex; flex-wrap: wrap; gap: 0 8.7px; }
.skill-big { display: inline-flex; align-items: center; gap: 7.25px; padding: 5.8px 14.5px; border-radius: 999px; background: var(--bg-surface); color: var(--brand-accent-strong); font: 600 17.4px/normal var(--font); } .skill-big img { width: 15.95px; height: 15.95px; }
.badge-lg { display: inline-flex; padding: 5.8px 14.5px; border-radius: 999px; background: var(--bg-surface-soft); font: 600 15.95px/23.2px var(--font); color: var(--text-secondary); white-space: nowrap; } .badge-lg.strong { background: var(--bg-surface-strong); color: var(--brand-primary); } .badge-lg.sent { box-shadow: inset 0 0 0 2.175px var(--border-strong); color: var(--brand-accent-strong); }
.seg { display: inline-flex; gap: 5.8px; padding: 5.8px; border-radius: 17.4px; background: var(--bg-surface); align-self: flex-start; } .seg span, .seg button { border: 0; cursor: pointer; background: transparent; padding: 11.6px 17.4px; border-radius: 13.05px; font: 600 18.85px/normal var(--font); color: var(--text-secondary); } .seg .on { background: #fff; color: var(--brand-primary); }
.textarea-mock { border: 1.45px solid var(--border-input); border-radius: 17.4px; padding: 20.3px; font: 400 20.3px/30.45px var(--font); }
.review-pair { display: flex; gap: 20.3px; align-items: flex-start; flex-wrap: wrap; justify-content: center; }
.paper { background: #fff; border: 1.45px solid var(--border-default); border-radius: 8.7px; padding: 26.1px; width: 333.5px; box-shadow: 0 17.4px 46.4px rgba(13, 10, 46, 0.1); display: flex; flex-direction: column; gap: 11.6px; }
.paper .nm { font: 800 23.2px/normal var(--font); color: var(--brand-accent-strong); } .paper .sm { font: 400 13.345px/20px var(--font); color: var(--text-tertiary); } .paper .sc { font: 700 13.345px/20px var(--font); letter-spacing: 0.8px; color: var(--brand-accent-strong); } .paper .tx { font: 400 15.7px/24px var(--font); } .paper .tx.b { font-weight: 700; } .paper .tx.m { color: var(--text-secondary); }
.mailbox { background: var(--bg-surface); border-radius: 20.3px; padding: 23.2px; width: 458.2px; max-width: 100%; display: flex; flex-direction: column; gap: 11.6px; } .mailbox b { font: 600 17.4px/normal var(--font); color: var(--brand-accent-strong); } .mailbox p { font: 400 18.85px/27.55px var(--font); }
.life { display: flex; flex-wrap: wrap; align-items: center; gap: 11.6px; } .life .c { width: 34.8px; height: 34.8px; border-radius: 17.4px; background: var(--bg-surface-strong); display: grid; place-items: center; } .life .c img { width: 17.4px; height: 17.4px; } .life .c.on { background: var(--brand-violet); color: #fff; font: 700 17.4px/normal var(--font); } .life .c.off { background: #fff; box-shadow: inset 0 0 0 2.9px var(--border-input); } .life b { font: 600 18.85px/normal var(--font); } .life b.dim { color: var(--text-tertiary); }
.demo-card .big-p { font: 400 20.3px/30.45px var(--font); color: var(--text-secondary); } .demo-card .btns { display: flex; gap: 11.6px; flex-wrap: wrap; }
.demo-card .btns span, .demo-card .btns button { border: 0; cursor: pointer; display: inline-flex; padding: 15.95px 26.1px; border-radius: 17.4px; font: 600 21.75px/31.9px var(--font); background: var(--brand-violet); color: #fff; } .demo-card .btns .ghost { background: #fff; color: var(--brand-primary); box-shadow: inset 0 0 0 2.175px var(--border-strong); }
.rule-row { display: flex; align-items: center; gap: 11.6px; } .rule-row span:first-child { flex: 1; font: 500 20.3px/normal var(--font); } .rule-row span:last-child { padding: 8.7px 17.4px; border-radius: 14.5px; box-shadow: inset 0 0 0 1.45px var(--border-input); font: 600 18.85px/normal var(--font); }
.demo-card .toggle { width: 63.8px; height: 34.8px; }
@media (max-width: 800px) { .job-step { gap: 16px; } .job-step h3 { font-size: 24px; line-height: 30px; } .demo { padding: 14px; } .paper, .mailbox { width: 100%; } }
.fork { display: flex; gap: 20px; width: 100%; } .fork > div { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 30px; border-radius: 24px; align-items: flex-start; }
.fork .yes { background: #fff; border: 2px solid var(--brand-violet); box-shadow: 0 10px 26px rgba(13, 10, 46, 0.1); } .fork .no { background: var(--bg-surface-soft); border: 1px solid var(--border-default); }
.fork .top { display: flex; gap: 12px; align-items: center; } .fork .ic { width: 52px; height: 52px; border-radius: 26px; background: var(--bg-surface); display: grid; place-items: center; } .fork .ic img { width: 24px; height: 24px; }
.fork h3 { font: 800 26px/32px var(--font); letter-spacing: -0.13px; } .fork p { font: 400 16px/25px var(--font); color: var(--text-secondary); }
@media (max-width: 800px) { .fork { flex-direction: column; } }
.q-pill { padding: 20px 36px; border-radius: 999px; background: var(--brand-primary); color: #fff; font: 700 20px/normal var(--font); }

/* content boxes inside centred sections read left to right */
.radar-bar, .job-row, .looking, .tpl, .stat-row, .more-grid, .svc-grid, .demo, .fork, .cta-row, .promise.left { text-align: left; }
.tpl-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tpl-row span { flex: none; padding-left: 6px; white-space: nowrap; }
.tpl { letter-spacing: -0.1px; }
@media (prefers-reduced-motion: reduce) { .site *, .site *::before, .site *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* moving between website pages is a short cross-fade (the browser keeps the old page on screen until the new one is ready), never a white flash */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 140ms; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ---- phones: a hero is only as tall as its words (not a full screen of empty space), and every link is a finger-size target ---- */
@media (max-width: 640px) { .hero, .f-hero { min-height: 0; } .f-hero { padding-block: 64px; } }
@media (max-width: 819px), (pointer: coarse) { .site-nav a:not(.sbtn), .foot-col a { display: block; padding-block: 10px; } .foot-col { gap: 0; } }

/* ---- phone: the step's number sits small beside its title so the words and the example get the width; a long pill wraps instead of running off the screen ---- */
@media (max-width: 640px) {
  .job-step { gap: 12px; } .job-step .num { width: 36px; height: 36px; font-size: 16px; } .job-step h3 { font-size: 22px; line-height: 28px; }
  .job-step .body { gap: 12px; padding-bottom: 40px; } .job-step .body > p { font-size: 16px; line-height: 24px; }
  .job-step .pill { white-space: normal; max-width: 100%; }
}
@media (max-width: 640px) { /* the example boxes: smaller words, and a long word (an email address) breaks instead of leaving its box */
  .demo * { overflow-wrap: anywhere; } .demo > * { min-width: 0; max-width: 100%; }
  .textarea-mock { padding: 14px; font-size: 15px; line-height: 22px; } .mailbox { padding: 16px; } .mailbox p { font-size: 15px; line-height: 22px; } .paper { padding: 16px; }
}
@media (max-width: 640px) { .demo .row > span[style] { font-size: 15px !important; } }

/* phones: sections need far less air, "In short" is a rounded box (not a circle), the template fan fits the width and its names are small */
@media (max-width: 640px) {
  .s-pad:not(.hero) { padding-block: 56px; } .s-pad.p148:not(.hero) { padding-block: 56px; }
  .in-short { flex-direction: column; border-radius: 20px; padding: 20px; gap: 6px; text-align: center; font-size: 18px; }
  .stage.tpl-stage { zoom: 0.28; } .tpl-names { gap: 6px; } .tpl-names .pill.lg { padding: 5px 10px; font-size: 12px; }
}
@media (max-width: 380px) { .stage.tpl-stage { zoom: 0.24; } }

/* site-pages.css: the styles of single website pages (Features, Job radar, Security, Pricing, Contact, errors, legal, checkout), after the shared site.css.
   It holds: page-only classes. It must not hold: the shared frame, buttons or tokens (site.css). */
/* Features page: hero with three moving chip rows over a dot grid, five-step list, comparison table, switch card, defaults */
  .f-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 28px; min-height: clamp(640px, calc(100vh - 88px), 900px); padding-block: 96px; background: var(--bg-page) radial-gradient(circle, var(--border-strong) 1.5px, transparent 1.6px) 15px 15px / 30px 30px; }
.f-hero-text { gap: 28px; padding: 0 var(--side); }
.marquee { position: relative; margin-top: 8px; display: grid; gap: 18px; }
.marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 260px; z-index: 2; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg-page), transparent); } .marquee::after { right: 0; background: linear-gradient(270deg, var(--bg-page), transparent); }
.m-row { overflow: hidden; } .m-track { display: flex; gap: 16px; width: max-content; animation: marq 60s linear infinite; will-change: transform; }
.m-row.rev .m-track { animation-direction: reverse; animation-duration: 70s; } .m-row:nth-child(3) .m-track { animation-duration: 80s; }
@keyframes marq { to { transform: translateX(calc(-50% - 8px)); } }
.mq-chip { display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 0 22px 0 13px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 999px; box-shadow: 0 6px 16px rgba(13, 10, 46, 0.07); font: 600 17px/21px var(--font); white-space: nowrap; }
.mq-chip i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--bg-surface); } .mq-chip i img { width: 19px; height: 19px; }
.f-steps { display: flex; gap: 32px; align-items: flex-start; }
.f-list { width: 380px; flex: none; display: grid; gap: 8px; }
.f-card { display: flex; align-items: center; gap: 14px; padding: 18px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 16px; transition: transform 160ms var(--ease), border-color 160ms var(--ease); }
.f-card:hover { transform: translateX(4px); border-color: var(--border-strong); }
.f-card b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bg-surface); font-size: 14px; flex: none; }
.f-card h3 { font-size: 17px; font-weight: 700; } .f-card p { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.f-card.on { background: var(--bg-surface); border-color: transparent; } .f-card.on b { background: var(--brand-violet); color: #fff; }
.f-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; padding: 40px; background: var(--bg-surface); border-radius: 28px; }
.f-panel h2 { font-size: 32px; font-weight: 800; letter-spacing: -0.01em; } .f-panel > p { font-size: 17px; line-height: 26px; color: var(--text-secondary); max-width: 700px; }
.f-mock { width: 520px; max-width: 100%; display: grid; gap: 12px; padding: 20px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 18px; box-shadow: 0 12px 32px rgba(13, 10, 46, 0.1); }
.f-mock-head, .f-mock-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .f-mock-head b { font-size: 17px; } .f-mock-row span { font-size: 14px; font-weight: 500; }
.f-mock-row em { font: 600 13px/normal var(--font); padding: 6px 12px; border: 1px solid var(--border-input); border-radius: 10px; }
.f-table-sec { display: flex; flex-direction: column; gap: 28px; } .w-700 { max-width: 700px; } .w-560 { max-width: 560px; }
.cmp { width: 100%; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 24px; overflow: hidden; box-shadow: 0 12px 32px rgba(13, 10, 46, 0.1); }
.cmp-row { display: flex; align-items: center; padding: 18px; font-size: 16px; font-weight: 500; } .cmp-row:nth-child(odd) { background: var(--bg-surface-soft); }
.cmp-row span:first-child { flex: 1; min-width: 0; } .cmp-row span + span { width: 220px; flex: none; display: flex; justify-content: center; align-items: center; height: 24px; }
.cmp-row small { font-size: 13px; color: var(--text-tertiary); font-weight: 400; }
.cmp-row.head { background: var(--brand-primary); background: var(--brand-primary); color: #fff; padding: 22px; font-size: 14px; font-weight: 700; } .cmp-row.head span:first-child { font-size: 15px; font-weight: 600; }
.sw-card { width: 620px; max-width: 100%; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 24px; box-shadow: 0 12px 32px rgba(13, 10, 46, 0.1); text-align: left; overflow: hidden; }
.sw-row { display: flex; align-items: center; gap: 16px; padding: 22px; } .sw-row + .sw-row { border-top: 1px solid var(--border-default); } .sw-row > div { flex: 1; min-width: 0; }
.sw-row b { display: block; font-size: 17px; } .sw-row p { font-size: 13px; line-height: 19px; color: var(--text-secondary); margin-top: 3px; }
.f-defaults { display: flex; flex-direction: column; gap: 28px; } .def-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.def-card { display: flex; flex-direction: column; gap: 8px; padding: 24px; height: 100px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 18px; transition: transform 160ms var(--ease), box-shadow 160ms var(--ease); }
.def-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(13, 10, 46, 0.08); } .def-card small { font-size: 13px; font-weight: 600; color: var(--text-tertiary); } .def-card b { font-size: 20px; line-height: 26px; }
@media (max-width: 1000px) { .f-steps { flex-direction: column; } .f-list { width: 100%; } .def-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .def-grid { grid-template-columns: 1fr; } .cmp-row span + span { width: 90px; } .cmp-row { padding: 14px; font-size: 14px; } .marquee::before, .marquee::after { width: 60px; } }

/* Job radar page: hero search over floating job cards and rings, two tailor paths, source switches, cover letter styles */
.s-pad.p88 { padding-block: 88px; } .stack24 { gap: 24px; } .w-900 { max-width: 900px; }
.bdg { display: inline-flex; padding: 4px 10px; border-radius: 999px; font: 600 11px/16px var(--font); white-space: nowrap; }
.bdg.strong { background: var(--bg-surface-strong); color: var(--brand-primary); } .bdg.soft { background: var(--bg-surface-soft); color: var(--text-secondary); }
.bdg.on { background: var(--bg-surface); color: var(--brand-accent-strong); } .bdg.off { background: var(--bg-card); border: 1.5px dashed var(--border-strong); color: var(--text-secondary); }
.rd-hero { padding-block: 120px; } .hero > .rd-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.rd-deco .ring { position: absolute; left: 50%; top: 43%; translate: -50% -50%; } .rd-deco .r1 { width: 460px; } .rd-deco .r2 { width: 780px; } .rd-deco .r3 { width: 1100px; }
.rd-deco .dot { position: absolute; width: 12px; height: 12px; }
.rd-card { position: absolute; display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 14px; box-shadow: 0 10px 26px rgba(13, 10, 46, 0.1); white-space: nowrap; }
.rd-card { text-align: left; } .rd-card b { font-size: 15px; } .rd-card span { font-size: 12px; color: var(--text-secondary); }
.rd-search { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 780px; max-width: 100%; }
.rd-bar { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 10px 10px 26px; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 999px; box-shadow: 0 12px 32px rgba(13, 10, 46, 0.1); }
.rd-bar span { flex: 1; min-width: 0; font-size: 18px; font-weight: 500; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbtn.tight { padding: 9px 16px; border-radius: 12px; }
.paths { display: flex; gap: 16px; width: 100%; align-items: stretch; text-align: left; }
.path { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 28px; background: var(--bg-surface-soft); border: 1px solid var(--border-default); border-radius: 24px; transition: transform 200ms var(--ease); }
.path.on { background: var(--bg-card); border: 2px solid var(--brand-violet); box-shadow: 0 10px 26px rgba(13, 10, 46, 0.1); } .path:hover { transform: translateY(-3px); }
.path-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; } .path h3 { font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -0.004em; } .path p { font-size: 16px; line-height: 25px; color: var(--text-secondary); }
.mode { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--bg-surface); border-radius: 12px; font: 700 14px/normal var(--font); }
.keeps { display: flex; align-items: center; gap: 14px; width: 100%; padding: 22px 28px; background: var(--bg-surface); border-radius: 20px; text-align: left; }
.keeps i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bg-card); flex: none; } .keeps > div { flex: 1; min-width: 0; } .keeps b { display: block; font-size: 19px; font-weight: 800; } .keeps p { font-size: 15px; line-height: 22px; color: var(--text-secondary); margin-top: 2px; }
.src-grid, .letters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; width: 100%; } .letters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.src { display: flex; flex-direction: column; gap: 10px; padding: 22px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 20px; transition: transform 160ms var(--ease), box-shadow 160ms var(--ease); }
.src:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(13, 10, 46, 0.08); } .src > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .src h3 { font-size: 18px; } .src p { font-size: 14px; line-height: 21px; color: var(--text-secondary); }
.letter { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 20px; } .letter.on { background: var(--bg-surface); border: 2px solid var(--brand-violet); }
.letter > div { display: flex; align-items: center; gap: 8px; justify-content: space-between; } .letter b { font-size: 18px; } .letter p { font-size: 14px; line-height: 22px; color: var(--text-secondary); }
@media (max-width: 1100px) { .rd-card { display: none; } .rd-search { width: 100%; } }
@media (max-width: 900px) { .paths, .keeps { flex-direction: column; align-items: stretch; } .src-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .letters { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .src-grid { grid-template-columns: 1fr; } .rd-bar { padding-left: 16px; } .rd-bar span { font-size: 15px; } }

/* Security page: trust cards, does / never does split, controls grid, promises, before and after */
.stack40 { gap: 40px; } .w-600 { max-width: 600px; } .w-680 { max-width: 680px; }
.sec-hero { background: var(--bg-surface-soft); }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; width: 1100px; max-width: 100%; }
.trust-card { display: flex; flex-direction: column; align-items: center; gap: 10px; width: calc((100% - 28px) / 3); min-width: 220px; padding: 22px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 20px; box-shadow: 0 10px 26px rgba(13, 10, 46, 0.1); transition: transform 200ms var(--ease); }
.trust-card:hover { transform: translateY(-4px); } .trust-card i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--bg-surface); }
.trust-card b { font-size: 20px; } .trust-card span { font-size: 15px; line-height: 22px; color: var(--text-secondary); }
.does { display: flex; padding-block: 20px; } .does-l, .does-r { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 22px; padding-block: 80px; text-align: left; }
.does-l { background: var(--bg-surface); padding-left: var(--side); padding-right: 72px; } .does-r { background: var(--brand-primary); color: #fff; padding-left: 72px; padding-right: var(--side); }
.does h2 { font-size: 32px; font-weight: 800; letter-spacing: -0.01em; } .tick { display: flex; gap: 14px; align-items: flex-start; } .tick p { font-size: 18px; line-height: 27px; font-weight: 500; max-width: 490px; }
.tick i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-violet); flex: none; } .does-r .tick i { background: var(--brand-secondary); }
.ctl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; }
.ctl { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-height: 199px; padding: 26px; background: var(--bg-surface-soft); border: 1px solid var(--border-default); border-radius: 22px; text-align: left; transition: transform 160ms var(--ease), box-shadow 160ms var(--ease); }
.ctl:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(13, 10, 46, 0.08); } .ctl h3 { font-size: 21px; font-weight: 800; letter-spacing: -0.004em; } .ctl p { font-size: 15px; line-height: 22px; color: var(--text-secondary); }
.ctl em { font: 600 13px/normal var(--font); padding: 7px 12px; border: 1px solid var(--border-input); border-radius: 10px; }
.promises { width: 100%; } .promise-row { display: flex; gap: 48px; padding-block: 30px; border-top: 1px solid var(--border-strong); } .promise-row:last-child { border-bottom: 1px solid var(--border-strong); }
.promise-row h3 { width: 420px; flex: none; font-size: 28px; line-height: 34px; font-weight: 800; letter-spacing: -0.008em; } .promise-row p { flex: 1; min-width: 0; font-size: 18px; line-height: 28px; color: var(--text-secondary); }
.versus { display: flex; gap: 16px; width: 100%; align-items: stretch; text-align: left; }
.vs { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 30px; background: var(--bg-surface-soft); border: 1px solid var(--border-default); border-radius: 24px; }
.vs.on { background: var(--bg-card); border: 2px solid var(--brand-violet); box-shadow: 0 10px 26px rgba(13, 10, 46, 0.1); } .vs h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.005em; }
.vs-row { display: flex; align-items: center; gap: 12px; } .vs-row span { font-size: 17px; font-weight: 500; color: var(--text-secondary); } .vs.on .vs-row span { color: var(--brand-primary); }
.vs-row i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-surface-strong); flex: none; } .vs.on .vs-row i { background: var(--brand-violet); }
@media (max-width: 1000px) { .ctl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .promise-row { flex-direction: column; gap: 12px; } .promise-row h3 { width: auto; } }
@media (max-width: 800px) { .does, .versus { flex-direction: column; } .does-l, .does-r { padding: 48px var(--side); } .trust-card { width: 100%; } }
@media (max-width: 560px) { .ctl-grid { grid-template-columns: 1fr; } }

/* Pricing page: plan cards (the highlighted one is dark), the Custom strip, the compare table and a note */
.pr-hero { background: var(--bg-surface-soft); padding: 72px var(--side) 64px; min-height: 0; display: block; }
.pr-hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; align-items: center; max-width: 1200px; margin-inline: auto; text-align: left; }
.pr-hero-text { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; } .pr-hero .h-xl { max-width: 600px; } .pr-hero .lead { max-width: 520px; }
.pr-points { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; } .pr-points li { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/normal var(--font); color: var(--brand-primary); }
.pr-stairs { display: flex; align-items: flex-end; gap: 12px; }
.pr-stairs .step { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 20px; min-height: calc(120px + var(--i) * 56px); border-radius: 22px; background: var(--bg-card); border: 1px solid var(--border-default); box-shadow: 0 12px 30px rgba(13, 10, 46, 0.1); animation: float 6s calc(var(--i) * 0.7s) ease-in-out infinite; transition: box-shadow 220ms var(--ease), translate 220ms var(--ease); }
.pr-stairs .step:hover { translate: 0 -6px; box-shadow: 0 18px 40px rgba(13, 10, 46, 0.16); } .pr-stairs .step.dark { background: var(--brand-primary); color: #fff; border-color: transparent; }
.pr-stairs b { font: 800 20px/26px var(--font); } .pr-stairs span { font: 400 13px/19px var(--font); color: var(--text-secondary); } .pr-stairs .dark span { color: var(--bg-surface); }
.pr-plans { scroll-margin-top: 16px; } .plan { scroll-margin-top: 24px; }
@media (max-width: 900px) { .pr-hero-grid { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 640px) { .pr-hero { padding: 40px var(--side) 40px; } .pr-hero-grid { gap: 28px; } .pr-hero-text { gap: 16px; } .pr-points { gap: 8px 16px; } .pr-points li { font-size: 14px; }
  .pr-stairs { flex-direction: column; align-items: stretch; gap: 10px; } .pr-stairs .step { min-height: 0; margin-left: calc(var(--i) * 14px); padding: 16px; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; animation: none; } .pr-stairs b { font-size: 17px; flex: none; } .pr-stairs span { text-align: right; } }
@media (prefers-reduced-motion: reduce) { .pr-stairs .step { animation: none; } }
.pr-plans { background: var(--bg-surface-soft); padding: 36px var(--side) 108px; display: flex; flex-direction: column; gap: 16px; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: 12px; padding: 26px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 26px; text-align: left; transition: transform 220ms var(--ease), box-shadow 220ms var(--ease); }
.plan:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(13, 10, 46, 0.1); } .plan.dark { background: var(--brand-primary); color: #fff; box-shadow: 0 18px 40px rgba(13, 10, 46, 0.16); }
.plan-name { display: flex; align-items: center; gap: 10px; } .plan-name b { font-size: 20px; font-weight: 800; } .plan-name span { padding: 4px 10px; border-radius: 999px; background: var(--brand-secondary); color: var(--brand-primary); font: 700 11px/normal var(--font); }
.plan-price { display: flex; align-items: flex-end; gap: 6px; } .plan-price strong { font-size: 52px; line-height: normal; font-weight: 800; letter-spacing: -0.03em; } .plan-price span { font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.plan-tag { font-size: 14px; line-height: 20px; color: var(--text-secondary); } .plan.dark .plan-price span, .plan.dark .plan-tag { color: var(--bg-surface); }
.plan-group { display: flex; flex-direction: column; gap: 5px; margin-top: 0; } .plan-group::before { content: ""; height: 1px; background: var(--border-default); margin-top: 7px; } .plan-group:first-of-type { margin-top: 0; }
.plan.dark .plan-group::before { background: var(--brand-secondary); opacity: 0.35; }
.plan-group small { font: 700 10px/normal var(--font); letter-spacing: 0.1em; color: var(--text-tertiary); } .plan.dark .plan-group small { color: var(--brand-secondary); }
.plan-row { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 16px; font-weight: 500; } .plan-row.off { font-weight: 400; color: var(--text-tertiary); }
.plan-row i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-surface); flex: none; } .plan-row.off i { background: none; border: 1.5px solid var(--border-strong); } .plan.dark .plan-row i { background: var(--brand-secondary); }
.plan-row i img { width: 10px; height: 10px; } .plan-row.off i img { width: 8px; height: 8px; }
.plan-custom { display: flex; align-items: center; gap: 24px; padding: 26px; background: var(--bg-surface); border-radius: 26px; text-align: left; }
.plan-custom > div { display: flex; flex-direction: column; gap: 2px; font-weight: 800; white-space: nowrap; } .plan-custom small { font-size: 16px; color: var(--brand-accent-strong); } .plan-custom b { font-size: 30px; }
.plan-custom p { flex: 1; min-width: 0; font-size: 15px; line-height: 22px; color: var(--text-secondary); }
.pr-cmp .cmp-row { padding: 12px; font-size: 15px; } .pr-cmp .cmp-row.head { padding: 20px; } .pr-cmp .cmp-row span + span { width: 200px; height: auto; } .pr-cmp .cmp-row b { font-size: 14px; font-weight: 600; text-align: center; }
.pr-note { display: flex; flex-direction: column; gap: 6px; padding: 24px; background: var(--bg-surface); border-radius: 20px; text-align: left; } .pr-note b { font-size: 19px; font-weight: 800; } .pr-note p { font-size: 15px; line-height: 23px; color: var(--text-secondary); max-width: 712px; }
.s-pad.stack24 { display: flex; flex-direction: column; } .pr-hero.center { gap: 24px; }
@media (max-width: 1000px) { .plan-grid { grid-template-columns: 1fr; } .plan-custom { flex-direction: column; align-items: flex-start; } }
@media (max-width: 640px) { .pr-cmp .cmp-row span + span { width: 64px; } .pr-cmp .cmp-row { font-size: 13px; } .pr-cmp .cmp-row b { font-size: 12px; } }

/* Contact page: the message form, three ways to reach us, the questions (native details, one open at a time) */
.ct-hero { padding: 140px var(--side) 156px; background: var(--bg-surface-soft); gap: 32px; }
.ct-form { width: 760px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; padding: 32px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 24px; box-shadow: 0 10px 26px rgba(13, 10, 46, 0.1); text-align: left; }
.ct-two { display: flex; gap: 16px; } .ct-two > label { flex: 1; min-width: 0; }
.ct-form label { display: flex; flex-direction: column; gap: 6px; } .ct-form label > span { font: 600 13px/normal var(--font); color: var(--text-secondary); }
.ct-form input, .ct-form select, .ct-form textarea { font: 400 15px/normal var(--font); color: var(--brand-primary); padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border-input); border-radius: 12px; width: 100%; transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease); }
.ct-form select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--brand-primary) 50%), linear-gradient(135deg, var(--brand-primary) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; text-overflow: ellipsis; } .ct-form select:invalid { color: var(--text-tertiary); } .ct-form option { color: var(--brand-primary); }
.ct-form textarea { height: 140px; resize: vertical; } .ct-form ::placeholder { color: var(--text-tertiary); }
.ct-form input:focus, .ct-form select:focus, .ct-form textarea:focus { outline: none; border-color: var(--brand-violet); box-shadow: 0 0 0 3px rgba(113, 96, 242, 0.2); }
.ct-form .form-error { color: #b42318; font-size: 14px; } .ct-form .sbtn { align-self: flex-start; }
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.way { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 230px; padding: 26px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 22px; transition: transform 160ms var(--ease), box-shadow 160ms var(--ease); }
.way:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(13, 10, 46, 0.08); } .way i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--bg-surface); }
.way h3 { font-size: 21px; font-weight: 800; } .way p { font-size: 15px; line-height: 22px; color: var(--text-secondary); } .way > a:not(.sbtn) { font: 600 15px/22px var(--font); color: var(--brand-accent-strong); }
.faq { width: 860px; max-width: 100%; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.faq details { padding: 24px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 20px; transition: box-shadow 200ms var(--ease), border-color 200ms var(--ease); }
.faq details[open] { border: 2px solid var(--brand-violet); padding: 23px; box-shadow: 0 10px 26px rgba(13, 10, 46, 0.1); }
.faq summary { display: flex; align-items: center; gap: 14px; cursor: pointer; list-style: none; font-size: 19px; font-weight: 700; } .faq summary::-webkit-details-marker { display: none; } .faq summary span { flex: 1; min-width: 0; }
.faq summary i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-surface); flex: none; transition: background 160ms var(--ease); } .faq .minus { display: none; }
.faq details[open] summary i { background: var(--brand-violet); } .faq details[open] .plus { display: none; } .faq details[open] .minus { display: block; }
.faq details p { margin-top: 10px; font-size: 17px; line-height: 27px; color: var(--text-secondary); animation: rise 260ms var(--ease) both; }
.faq summary:focus-visible { outline: 3px solid var(--brand-accent-strong); outline-offset: 4px; border-radius: 8px; }
@media (max-width: 900px) { .ways { grid-template-columns: minmax(0, 1fr); } .ct-two { flex-direction: column; } .way { min-height: 0; min-width: 0; } .way > a:not(.sbtn) { overflow-wrap: anywhere; } }
@media (max-width: 560px) { .way { padding: 20px; } .way h3 { font-size: 19px; } .ct-form { padding: 20px; } .faq summary { font-size: 16px; } }

/* Error and maintenance pages: a centred card on the page colour, no top bar or footer */
.err { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; }
.err-brand { font-size: 18px; font-weight: 800; margin-bottom: 40px; }
.err-card { width: 560px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 36px 44px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 28px; box-shadow: 0 12px 32px rgba(13, 10, 46, 0.1); text-align: center; animation: rise 500ms var(--ease) both; }
.err-card img { animation: float 6s ease-in-out infinite; } .err-code { font-size: 44px; font-weight: 800; color: var(--brand-secondary); }
.err-card h1 { font-size: 24px; font-weight: 800; } .err-card p { font-size: 14px; color: var(--text-secondary); } .err-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.err-help { padding-top: 24px; margin: 0; font-size: 13px; color: var(--text-tertiary); }

/* Privacy policy and Terms: a slim top bar, a lavender title band, then a sticky "On this page" list beside one readable column (the list appears when legal.js runs) */
.legal-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px clamp(16px, 4vw, 48px); background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.legal-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; } .legal-actions { display: flex; gap: 8px; }
.legal-hero { background: radial-gradient(520px 320px at 90% 0, rgba(167, 139, 250, 0.3), transparent 70%), linear-gradient(160deg, #EFEBFF, #E2DBFF); }
.legal-hero-in { width: min(1120px, 100%); margin: 0 auto; padding: clamp(36px, 7vw, 72px) clamp(16px, 4vw, 48px); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.legal-hero .doc-title { margin: 0; font-size: clamp(30px, 5vw, 46px); line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; color: var(--ink, #0D0B2D); }
.legal-hero .doc-meta { font-size: 13px; color: var(--text-secondary); }
.legal-other { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--brand-accent-strong); }
.legal-wrap { width: min(1120px, 100%); margin: 0 auto; padding: 40px clamp(16px, 4vw, 48px) 80px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.legal-toc { display: none; }
.legal-doc { width: min(720px, 100%); display: flex; flex-direction: column; gap: 16px; text-align: left; }
.legal-doc h2 { margin: 24px 0 0; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--ink, #0D0B2D); scroll-margin-top: 84px; }
.legal-doc p, .legal-doc li { margin: 0; font-size: 16px; line-height: 1.7; color: var(--text-secondary); overflow-wrap: anywhere; }
.legal-doc ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.legal-doc .highlight-text, .legal-doc strong { color: var(--brand-primary); font-weight: 700; } .legal-doc a { color: var(--brand-accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.legal-doc code, .legal-doc .mono { font-family: var(--mono, monospace); font-size: 14px; } .legal-doc code { background: var(--bg-surface-soft); padding: 1px 6px; border-radius: 6px; }
.legal-doc .callout-box { padding: 16px 20px; background: var(--bg-surface); border-radius: 16px; }
.legal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 20px; padding: 28px 16px 40px; border-top: 1px solid var(--border); font-size: 14px; color: var(--text-tertiary); } .legal-foot a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--text-secondary); }
@media (min-width: 1000px) {
  .legal-wrap { grid-template-columns: 240px minmax(0, 720px); justify-content: space-between; }
  .legal-toc:not([hidden]) { display: block; position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); overflow: auto; }
  .legal-toc b { display: block; margin-bottom: 8px; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-tertiary); }
  .legal-toc a { display: block; padding: 8px 12px; border-left: 2px solid var(--border); font-size: 13px; line-height: 18px; color: var(--text-secondary); transition: color 150ms, border-color 150ms, background 150ms; }
  .legal-toc a:hover { color: var(--brand-primary); } .legal-toc a[aria-current="true"] { border-color: var(--brand-primary); color: var(--brand-primary); font-weight: 700; background: var(--bg-surface-soft); }
}
@media (max-width: 520px) { .legal-actions .ghost:not(.is-back) { display: none; } .legal-doc p, .legal-doc li { font-size: 15px; } }
@media (prefers-reduced-motion: no-preference) { html:has(.legal-wrap) { scroll-behavior: smooth; } }

/* Checkout: a slim top bar with the four steps, a form card and the order summary; the last stage is one centred card */
.co { min-height: 100vh; display: flex; flex-direction: column; }
.co-bar { display: flex; align-items: center; gap: 16px; padding: 22px 60px; } .co-brand { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; flex: 1; }
.co-steps { display: flex; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0; } .co-steps li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-tertiary); font-weight: 500; }
.co-steps li + li::before { content: ""; width: 28px; height: 2px; background: var(--bg-surface-strong); }
.co-steps i, .co-track i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bg-card); border: 1.5px solid var(--border-strong); font: 700 12px/1 var(--font); font-style: normal; color: var(--text-tertiary); flex: none; }
.co-steps i img, .co-track i img { display: none; } .co-steps li[data-state="now"] i, .co-track li[data-state="now"] i { background: var(--brand-violet); border-color: var(--brand-violet); color: #fff; } .co-steps li[data-state="now"] b { color: var(--brand-primary); }
.co-steps li[data-state="done"] i, .co-track li[data-state="done"] i { background: var(--brand-violet); border-color: var(--brand-violet); } .co-steps li[data-state="done"] i span, .co-track li[data-state="done"] i span { display: none; } .co-steps li[data-state="done"] i img, .co-track li[data-state="done"] i img { display: block; } .co-steps li[data-state="done"] b { color: var(--brand-primary); }
.co-steps b { font-weight: 700; } .co-steps li:not([data-state]) b { font-weight: 500; }
.co-secure { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.co-grid { display: flex; gap: 32px; align-items: flex-start; padding: 16px 60px 60px; } .co-main { width: 760px; max-width: 100%; }
.co-card { display: flex; flex-direction: column; gap: 14px; padding: 32px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 24px; box-shadow: 0 14px 36px rgba(13, 10, 46, 0.1); text-align: left; animation: rise 360ms var(--ease) both; }
.co-card[hidden], .co-wait[hidden], .co-sum-more[hidden] { display: none; }
.co-card h1 { font-size: 26px; font-weight: 800; } .co-card > p { font-size: 14px; line-height: 21px; color: var(--text-secondary); }
.co-card label { display: flex; flex-direction: column; gap: 6px; } .co-card label > span, .co-label { font: 600 13px/normal var(--font); color: var(--text-secondary); }
.co-card input:not([type=checkbox]):not([type=file]), .co-card select { font: 500 14px/normal var(--font); color: var(--brand-primary); padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border-input); border-radius: 12px; width: 100%; transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease); }
.co-card input:focus, .co-card select:focus { outline: none; border-color: var(--brand-violet); box-shadow: 0 0 0 3px rgba(113, 96, 242, 0.2); }
.co-card select { appearance: none; background: var(--bg-card) url(/assets/img/site/co-chevron.svg) no-repeat right 14px center; padding-right: 40px; }
.co-go { margin-top: 2px; padding-block: 15px; border-radius: 14px; } .co-two { display: flex; gap: 14px; } .co-two > label { flex: 1; min-width: 0; }
.co-title { display: flex; align-items: center; gap: 10px; } .co-title h1 { flex: 1; font-size: 24px; }
.co-methods { display: flex; flex-direction: column; gap: 14px; } .co-m { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--bg-surface-soft); border: 1px solid var(--border-default); border-radius: 16px; }
.co-m > i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--bg-surface); font: 800 13px/1 var(--font); font-style: normal; color: var(--brand-accent-strong); flex: none; }
.co-m > div { flex: 1; min-width: 0; } .co-m b { display: block; font-size: 15px; font-weight: 700; } .co-m small { display: block; font-size: 12px; color: var(--text-secondary); } .co-m strong { font-size: 15px; font-weight: 800; }
.co-copy { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 10px; font: 700 13px/normal var(--font); color: var(--brand-accent-strong); cursor: pointer; transition: background 140ms var(--ease); } .co-copy:hover { background: var(--bg-surface-soft); }
.co-drop { position: relative; flex-direction: row !important; align-items: center; gap: 16px !important; padding: 18px; background: var(--bg-surface-soft); border: 1.5px dashed var(--brand-violet); border-radius: 18px; cursor: pointer; transition: background 140ms var(--ease); } .co-drop:hover { background: var(--bg-surface); }
.co-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .co-thumb { display: flex; flex-direction: column; gap: 6px; width: 72px; height: 92px; padding: 10px; background: #fff; border: 1px solid var(--border-strong); border-radius: 10px; flex: none; }
.co-thumb i { display: block; height: 5px; border-radius: 2px; background: var(--bg-surface-strong); } .co-thumb i:nth-child(1) { width: 44px; } .co-thumb i:nth-child(2) { width: 50px; } .co-thumb i:nth-child(3) { width: 34px; } .co-thumb i:nth-child(4) { width: 46px; }
.co-file { flex: 1; min-width: 0; } .co-file b { display: block; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .co-file small { font-size: 12px; color: var(--text-secondary); }
.co-tick { flex-direction: row !important; align-items: center; gap: 10px !important; position: relative; font-size: 13px; color: var(--text-secondary); cursor: pointer; } .co-tick input { position: absolute; opacity: 0; width: 20px; height: 20px; }
.co-tick i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border-strong); background: #fff; flex: none; transition: background 140ms var(--ease); } .co-tick i img { opacity: 0; } .co-tick input:checked + i { background: var(--brand-accent-strong); border-color: var(--brand-accent-strong); } .co-tick input:checked + i img { opacity: 1; } .co-tick input:focus-visible + i { outline: 3px solid var(--brand-accent-strong); outline-offset: 2px; }
.co-sum { width: 380px; flex: none; padding: 26px; } .co-sum h2 { font-size: 16px; font-weight: 800; } .co-sum > div, .co-sum-more > div { display: flex; gap: 8px; font-size: 14px; } .co-sum span { flex: 1; color: var(--text-secondary); font-weight: 500; } .co-sum b { font-weight: 600; text-align: right; overflow-wrap: anywhere; } .co-sum strong { font-weight: 800; }
.co-sum-more { display: flex; flex-direction: column; gap: 14px; } .co-sum hr { border: 0; height: 1px; background: var(--border-default); margin: 0; } .co-sum > p { font-size: 13px; line-height: 19px; color: var(--text-secondary); }
.co-wait { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 20px 60px; } .co-wait .co-card { width: 560px; max-width: 100%; align-items: center; text-align: center; padding: 36px; border-radius: 28px; }
.co-clock { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--bg-surface); } .co-wait p { font-size: 15px !important; line-height: 23px !important; max-width: 480px; }
.co-track { display: flex; list-style: none; margin: 0; padding: 0; align-items: flex-start; } .co-track li:not(.bar) { display: flex; flex-direction: column; align-items: center; gap: 6px; } .co-track b { font-size: 13px; font-weight: 700; color: var(--text-tertiary); } .co-track li[data-state] b { color: var(--brand-primary); } .co-track small { font-size: 12px; color: var(--text-secondary); }
.co-track .bar { width: 60px; height: 2px; margin-top: 12px; background: var(--bg-surface-strong); } .co-track .bar.on { background: var(--brand-violet); } .co-track li[data-state="now"] i { background: #fff; border: 2px solid var(--brand-violet); color: var(--brand-accent-strong); }
.co-pill { width: 100%; padding: 14px 18px; background: var(--bg-surface); border-radius: 14px; font-size: 13px; font-weight: 600; white-space: pre-wrap; } .co-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 1100px) { .co-grid { flex-direction: column; padding-inline: 20px; } .co-main, .co-sum { width: 100%; } .co-bar { flex-wrap: wrap; padding-inline: 20px; } .co-steps { order: 3; width: 100%; overflow-x: auto; } .co-secure { flex: none; } }
@media (max-width: 640px) { .co-two { flex-direction: column; } .co-card { padding: 22px; } .co-m { flex-wrap: wrap; } .co-track .bar { width: 28px; } }
.co[data-view="wait"] .co-grid, .co[data-view="wait"] .co-steps, .co[data-view="wait"] .co-secure { display: none; }
.co-thumb.has-img { padding: 0; overflow: hidden; } .co-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.co-wait[data-result="rejected"] .co-clock { display: none; }
@media (max-width: 1000px) { .pr-cmp .cmp-row span + span { width: 18%; } } @media (max-width: 640px) { .pr-cmp .cmp-row span + span { width: 21%; } .pr-cmp .cmp-row { padding-inline: 10px; } }

/* Checkout, the details step and the page frame: roomy centred layout, fields like the sign-in screens, a message next to each wrong field */
.co { background: radial-gradient(900px 360px at 50% -80px, rgba(167, 139, 250, 0.22), transparent 70%), var(--bg); }
.co-grid { width: 100%; max-width: 1240px; margin: 0 auto; justify-content: center; }
.co-card { box-shadow: 0 24px 48px -32px rgba(91, 75, 255, 0.35), 0 1px 3px rgba(13, 11, 45, 0.05); }
.co-card label > span { color: var(--ink, #0D0B2D); } .co-card label > span em { font-style: normal; font-weight: 500; color: var(--text-tertiary); }
.co-card label > small { font-size: 12px; color: var(--text-tertiary); }
.co-card input:not([type=checkbox]):not([type=file]), .co-card select { min-height: 48px; border-radius: 12px; border: 1.5px solid #D5CFF4; font-size: 15px; transition: border-color 150ms, box-shadow 150ms; }
.co-card input:hover:not(:focus) { border-color: #B9B0EE; }
.co-card label[data-invalid] input { border-color: var(--ink, #0D0B2D); box-shadow: 0 0 0 3px rgba(13, 11, 45, 0.1); }
.co-card .error { font-size: 12.5px; line-height: 18px; font-weight: 600; color: var(--ink, #0D0B2D); }
.co-card .form-error { margin: 0; padding: 12px 14px; border-radius: 12px; background: #F1EEFF; border-left: 4px solid var(--ink, #0D0B2D); font-size: 13px; font-weight: 600; }
.co-go { min-height: 50px; font-size: 15px; font-weight: 700; background: linear-gradient(135deg, #7A69F7, #5B4BFF); box-shadow: 0 14px 26px -14px rgba(91, 75, 255, 0.85); }
.co-next { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font-size: 13px; color: var(--text-tertiary); }
.co-sum { position: sticky; top: 16px; }
@media (max-width: 1100px) { .co-sum { position: static; } .co-card input:not([type=checkbox]):not([type=file]), .co-card select { font-size: 16px; } } /* 16px: a phone does not zoom the page when a field is tapped */
.co-secure { gap: 14px; } .co-lock { display: inline-flex; align-items: center; gap: 6px; } .co-back { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 640px) { .co-lock { display: none; } .co-bar { gap: 10px; } }
@media (max-width: 640px) { .co-steps li:not([data-state="now"]) b { display: none; } .co-steps li + li::before { width: 16px; } .co-back { min-height: 36px; padding: 6px 12px; font-size: 13px; } .co-bar { justify-content: space-between; } .co-steps { order: 3; width: 100%; justify-content: center; } }
/* checkout, the payment and proof steps on tablet and phone: the title, the accounts and the file box stack instead of overlapping */
@media (max-width: 820px) { .co-title { flex-wrap: wrap; row-gap: 8px; } .co-title h1 { flex: 1 1 260px; min-width: 0; font-size: 22px; line-height: 28px; overflow-wrap: anywhere; } .co-card h1 { overflow-wrap: anywhere; } }
@media (max-width: 640px) {
  .co-card h1 { font-size: 22px; line-height: 28px; } .co-title h1 { font-size: 20px; line-height: 26px; }
  .co-m { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; }
  .co-m > i { grid-column: 1; grid-row: 1; } .co-m > div { grid-column: 2; grid-row: 1; min-width: 0; } .co-m > div small { overflow-wrap: anywhere; }
  .co-m > .co-copy { grid-column: 3; grid-row: 1; }
  .co-m > strong { grid-column: 1 / -1; grid-row: 2; font-size: 17px; letter-spacing: 0.02em; overflow-wrap: anywhere; padding-top: 4px; border-top: 1px solid var(--border-default); }
  .co-drop { flex-wrap: wrap; } .co-drop .co-file { flex: 1 1 140px; } .co-file b { white-space: normal; overflow-wrap: anywhere; }
  .co-pill { white-space: normal; overflow-wrap: anywhere; } .co-btns { flex-wrap: wrap; justify-content: center; }
}
/* the top bar's right side: "Back to website" and "Secure checkout" are two quiet text items on one line, not a big button over a stacked lock */
.co .co-secure { align-items: center; gap: 16px; white-space: nowrap; }
.co .co-secure a.sbtn.co-back { min-height: 0; height: auto; padding: 8px 0; border: 0; background: transparent; box-shadow: none; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.co .co-secure a.sbtn.co-back:hover { color: var(--brand-primary); background: transparent; }
.co .co-lock { display: inline-flex; align-items: center; gap: 6px; padding-left: 16px; border-left: 1px solid var(--border-default); font-size: 13px; font-weight: 600; line-height: 1; }
.co .co-lock img { flex: none; display: block; }
@media (max-width: 640px) { .co .co-secure a.sbtn.co-back { padding: 10px 0; } }
/* the waiting screen on tablet and phone: the steps, the invoice line and the buttons fit and wrap instead of overlapping */
@media (max-width: 640px) { .co-wait { padding: 0 16px 40px; } .co-wait .co-card { padding: 24px 18px; gap: 12px; } .co-wait h1 { font-size: 22px; line-height: 28px; } .co-track { width: 100%; justify-content: space-between; } .co-track li:not(.bar) { min-width: 0; flex: 1 1 0; } .co-track small { overflow-wrap: anywhere; text-align: center; } .co-track .bar { width: auto; flex: 1 1 12px; min-width: 8px; } .co-btns .sbtn { flex: 1 1 140px; justify-content: center; } }
/* the code step of buying: the six boxes sit in the card like on the sign-in screens */
.co-card .otp { display: flex; justify-content: center; gap: clamp(4px, 1.8vw, 10px); width: 100%; }
.co-card .otp input { flex: 1 1 0; min-width: 0; width: auto; max-width: 56px; height: 52px; padding: 0; text-align: center; font: 700 20px/1 var(--font); }
.co-verify strong { overflow-wrap: anywhere; } .co-next .linklike { min-height: 44px; padding: 0 6px; font-size: 13px; }
.co-verify .co-next { flex-wrap: wrap; row-gap: 0; } .co-verify .co-next .linklike { white-space: nowrap; text-decoration: none; color: var(--brand-accent-strong); } .co-verify .co-next .linklike:disabled { color: var(--text-tertiary); }

/* a promotion price: the tag, the old price crossed out */
.promo-tag { display: inline-block; padding: 3px 10px; border-radius: 99px; background: #fff1d6; color: #8a5a00; font-size: 12px; font-weight: 700; }
.plan-price s, .co-sum s { opacity: .55; font-weight: 500; margin-right: 6px; }
.plan-price .promo-tag { display: block; width: max-content; margin-bottom: 6px; }

/* checkout: what people say (HTML and CSS only) */
.co-proof { max-width: 1080px; margin: 40px auto 0; padding: 0 16px; }
.co-proof h2 { font-size: 22px; text-align: center; margin-bottom: 18px; }
.co-proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.co-quote { margin: 0; padding: 20px; border-radius: 20px; background: #fff; border: 1px solid #e6e2fb; box-shadow: 0 10px 24px rgba(113, 96, 242, .08); display: flex; flex-direction: column; gap: 12px; }
.co-quote:nth-child(odd) { background: linear-gradient(160deg, #f6f4ff, #fff); }
.co-stars { color: #f5a524; letter-spacing: 2px; font-size: 18px; }
.co-quote blockquote { margin: 0; font-size: 15px; line-height: 1.5; color: #1c1a3a; }
.co-quote figcaption { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.co-quote figcaption i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; color: #fff; background: #7160f2; flex: none; }
.co-quote[data-tone="2"] figcaption i { background: #3aa57b; } .co-quote[data-tone="3"] figcaption i { background: #e0703a; } .co-quote[data-tone="4"] figcaption i { background: #2f80d1; }
.co-quote figcaption span { display: flex; flex-direction: column; line-height: 1.25; } .co-quote small { color: #6b6890; }
.co-m i img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; display: block; }


/* home: the product demo (four panes play one after the other, 5 s each) */
.fd { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; width: 100%; text-align: left; align-items: stretch; }
.fd-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fd-steps li { display: flex; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 16px; background: var(--bg-card); border: 1px solid var(--border-default); animation: fd-on 8s calc(var(--i) * 2s) infinite both; }
.fd-steps b { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-surface); color: var(--brand-accent-strong); font: 700 15px/normal var(--font); }
.fd-steps h3 { font: 700 17px/normal var(--font); } .fd-steps p { font: 400 14px/20px var(--font); color: var(--text-secondary); }
.fd-screen { position: relative; min-height: 270px; border-radius: 20px; background: var(--bg-card); border: 1px solid var(--border-default); box-shadow: 0 18px 44px rgba(13, 10, 46, 0.12); overflow: hidden; }
.fd-pane { position: absolute; inset: 0; padding: 28px; display: flex; flex-direction: column; gap: 12px; opacity: 0; animation: fd-pane 8s calc(var(--i) * 2s) infinite both; }
.fd-pane small { font: 600 12px/normal var(--font); color: var(--text-tertiary); } .fd-pane h4 { font: 700 22px/28px var(--font); } .fd-pane > span:not([class]) { font: 500 14px/normal var(--font); color: var(--text-secondary); }
.fd-bar { display: block; height: 10px; border-radius: 5px; background: var(--bg-surface); transform-origin: left; animation: fd-grow 8s calc(var(--i, 0) * 2s + var(--n) * 0.14s + 0.15s) infinite both; }
.fd-pane:nth-child(1) .fd-bar { --i: 0; } .fd-pane:nth-child(3) .fd-bar { --i: 2; }
.fd-chips { display: flex; flex-wrap: wrap; gap: 8px; } .fd-chip { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--bg-surface); color: var(--brand-accent-strong); font: 600 13px/normal var(--font); animation: fd-pop 8s calc(1.25s + var(--n) * 0.075s + 0.05s) infinite both; } .fd-chip img { width: 12px; height: 12px; }
.fd-score { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; font: 600 14px/normal var(--font); color: var(--text-secondary); } .fd-score b { font: 800 30px/normal var(--font); color: var(--brand-primary); }
.fd-meter { height: 10px; border-radius: 5px; background: var(--bg-surface); overflow: hidden; } .fd-meter i { display: block; height: 100%; width: 86%; border-radius: 5px; background: var(--brand-violet); transform-origin: left; animation: fd-grow 8s 2.4s infinite both; }
.fd-approve { align-self: flex-start; margin-top: auto; animation: fd-pop 8s 4.4s infinite both; }
.fd-tag { align-self: flex-start; padding: 8px 16px; border-radius: 999px; background: var(--bg-surface); color: var(--brand-accent-strong); font: 700 15px/normal var(--font); animation: fd-pop 8s calc(3.75s + var(--n) * 0.22s + 0.05s) infinite both; } .fd-tag.hot { background: var(--brand-violet); color: #fff; }
.fd-note { margin-top: auto; font: 500 14px/normal var(--font); color: var(--text-secondary); animation: fd-pop 8s 7.3s infinite both; }
@keyframes fd-pane { 0% { opacity: 0; transform: translateY(14px); } 2%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes fd-on { 0%, 25%, 100% { background: var(--bg-card); transform: none; } 1%, 23% { background: var(--bg-surface); transform: translateX(6px); } }
@keyframes fd-grow { 0% { transform: scaleX(0); } 4%, 100% { transform: scaleX(1); } }
@keyframes fd-pop { 0% { opacity: 0; transform: scale(0.6); } 2%, 100% { opacity: 1; transform: none; } }
.fd:hover .fd-pane, .fd:hover .fd-steps li, .fd:hover [class^="fd-"] { animation-play-state: paused; }
@media (max-width: 900px) { .fd { grid-template-columns: 1fr; } .fd-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .fd-steps p { display: none; } .fd-steps li { padding: 12px; gap: 10px; } .fd-steps h3 { font-size: 15px; } .fd-screen { min-height: 300px; } }
@media (prefers-reduced-motion: reduce) { .fd *, .fd-pane { animation: none !important; } .fd-pane { opacity: 0; } .fd-pane:first-child { opacity: 1; } }

/* site-motion.css: all movement of the website: hero art, headline words, card fan, staggered grids, live loops, pointer tilt, sonar, sparks.
   Only transform and opacity change (cheap for the browser); everything is switched off for "reduce motion" at the end.
   It holds: keyframes and the rules that use them. It must not hold: layout or colours (site.css, site-pages.css). */
/* motion: every section moves in its own way. Grids and lists reveal their children one after the other (reveal.js marks them), the growth chart draws itself,
   the resume cards fan out, the numbers count up. Only transform and opacity change (cheap for the browser); all of it is off for "reduce motion". */
.home-hero { padding: 100px var(--side) 80px; }
.art-svg { width: 100%; height: 100%; display: block; }
.js .art-svg .line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.4s var(--ease) forwards; }
.art-svg .l1 { animation-delay: 0.2s !important; } .art-svg .l3 { animation-delay: 0.5s !important; animation-duration: 2.8s !important; }
.js .art-svg .area { opacity: 0; animation: fade-in 1.6s 2s var(--ease) forwards; }
.js .art-svg .node, .js .art-svg .halo { opacity: 0; transform-box: fill-box; transform-origin: center; animation: node-pop 700ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) forwards; }
.art-svg .n1, .art-svg .h1 { animation-delay: 1.5s !important; } .art-svg .n2, .art-svg .h2 { animation-delay: 2.1s !important; } .art-svg .n3, .art-svg .h3 { animation-delay: 2.8s !important; }
.js .art-svg .halo { animation: node-pop 700ms both, halo 2.6s ease-in-out infinite; } .art-svg .h1 { animation-delay: 1.5s, 2.2s !important; } .art-svg .h2 { animation-delay: 2.1s, 2.8s !important; } .art-svg .h3 { animation-delay: 2.8s, 3.5s !important; }
.art-svg .b1 { animation: drift 14s ease-in-out infinite; } .art-svg .b2 { animation: drift 18s ease-in-out infinite reverse; }
@keyframes draw { to { stroke-dashoffset: 0; } } @keyframes fade-in { to { opacity: 1; } }
@keyframes node-pop { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: none; } }
@keyframes halo { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.5); opacity: 0.25; } }
@keyframes drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(14px, 18px); } }
/* hero cards: they slide in from their own side and the skill chips pop one by one */
.hero-stage .m-resume { animation: slide-l 900ms 350ms var(--ease) backwards, float 7s 1.4s ease-in-out infinite; }
.hero-stage .m-mail { animation: slide-r 900ms 550ms var(--ease) backwards, float 7s 1.6s ease-in-out infinite; }
.hero-stage .m-ats { animation: pop 800ms 750ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) backwards, float 8s 1.8s ease-in-out infinite reverse; }
.hero-stage .m-skill { animation: pop 500ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) backwards; } .hero-stage .m-skill:nth-child(1) { animation-delay: 900ms; } .hero-stage .m-skill:nth-child(2) { animation-delay: 1000ms; } .hero-stage .m-skill:nth-child(3) { animation-delay: 1100ms; } .hero-stage .m-skill:nth-child(4) { animation-delay: 1200ms; }
@keyframes slide-l { from { opacity: 0; transform: translateX(-80px) rotate(-3deg); } } @keyframes slide-r { from { opacity: 0; transform: translateX(80px) rotate(3deg); } }
@keyframes pop { from { opacity: 0; transform: scale(0.6); } }
/* template fan: the cards start stacked in the middle, fan out, then breathe; hover lifts one */
.tpl-stage[data-in] .tpl { animation: fan 1s var(--ease) backwards, tpl-float 7s 1.2s ease-in-out infinite; }
.tpl-stage[data-in] .pos-silicon { --fx: 450px; } .tpl-stage[data-in] .pos-oxford { --fx: 215px; animation-delay: 80ms, 1.3s; } .tpl-stage[data-in] .pos-apex { --fx: 0px; animation-delay: 160ms, 1.4s; }
.tpl-stage[data-in] .pos-nova { --fx: -215px; animation-delay: 240ms, 1.5s; } .tpl-stage[data-in] .pos-monarch { --fx: -430px; animation-delay: 320ms, 1.6s; }
.tpl-stage:not([data-in]) .tpl { opacity: 0; }
.tpl { transition: scale 260ms var(--ease), box-shadow 260ms var(--ease); } .tpl:hover { scale: 1.05; z-index: 6; box-shadow: 0 18px 40px rgba(13, 10, 46, 0.22); }
.tpl-stage[data-in] .tpl-sec i { transform-origin: left; animation: grow 900ms 700ms var(--ease) backwards; }
@keyframes fan { from { opacity: 0; transform: translate(var(--fx, 0), 50px) rotate(0deg) scale(0.86); } }
@keyframes tpl-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.tpl-names .pill { transition: transform 200ms var(--ease); } .tpl-names .pill:hover { transform: translateY(-3px); }
/* stagger: children of a revealed grid come in one after the other, each grid with its own movement (a rise, a pop, a tilt, a slide from both sides) */
.js [data-stagger]:not([data-in]) > * { opacity: 0; }
.js [data-stagger][data-in] > * { animation: var(--st, st-rise) 700ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 90ms); }
[data-stagger="1"] { --st: st-pop; } [data-stagger="2"] { --st: st-tilt; perspective: 900px; } [data-stagger="3"] { --st: st-slide; }
[data-stagger="3"] > :nth-child(even) { --dir: 1; } [data-stagger="3"] > :nth-child(odd) { --dir: -1; }
@keyframes st-rise { from { opacity: 0; transform: translateY(34px); } }
@keyframes st-pop { from { opacity: 0; transform: scale(0.8); } 60% { transform: scale(1.03); } }
@keyframes st-tilt { from { opacity: 0; transform: rotateX(-22deg) translateY(26px); } }
@keyframes st-slide { from { opacity: 0; transform: translateX(calc(var(--dir, -1) * 46px)); } }
.js [data-stagger]:not([data-in]) .bar i, .js .stat-row:not([data-in]) .bar i { transform: scaleX(0); animation: none; }
.stat-row[data-in] .bar i { animation: grow 1.3s 500ms var(--ease) backwards; }
/* more hover life on cards of every page */
.f-card, .def-card, .src, .way, .ctl, .plan, .trust-card, .path, .vs, .letter, .svc, .stat, .job { transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease); }
.stat:hover, .letter:hover, .vs:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(13, 10, 46, 0.12); }
.sbtn.primary { position: relative; overflow: hidden; } .sbtn.primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); transform: translateX(-120%); }
.sbtn.primary:hover::after { transform: translateX(120%); transition: transform 700ms var(--ease); }
.home-hero { padding: 92px var(--side) 64px; } .home-hero .hero-art { inset: 0 0 auto 0; height: min(100%, calc(100vh - 88px)); } .home-hero .hero-stage { margin-top: -28px; }
@media (prefers-reduced-motion: reduce) { .js .art-svg .line { stroke-dashoffset: 0; } .js .art-svg .area, .js .art-svg .node, .js .art-svg .halo { opacity: 1; } .js [data-stagger]:not([data-in]) > *, .tpl-stage:not([data-in]) .tpl { opacity: 1; } }

/* live motion: things keep moving a little after they arrive (transform and opacity only, so it stays smooth and light) */
.hero, .f-hero, .bg-surface, .bg-strong { isolation: isolate; }
.hero, .bg-surface, .bg-strong { position: relative; overflow: hidden; }
.hero::before, .f-hero::before, .bg-surface::before, .bg-strong::before { content: ""; position: absolute; z-index: -1; width: 560px; height: 560px; left: -160px; top: 8%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(167, 139, 250, 0.26), transparent 66%); animation: orb 18s ease-in-out infinite; }
.hero::after, .f-hero::after, .bg-surface::after, .bg-strong::after { content: ""; position: absolute; z-index: -1; width: 480px; height: 480px; right: -140px; bottom: 4%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(113, 96, 242, 0.2), transparent 66%); animation: orb 22s ease-in-out infinite reverse; }
.bg-strong::before, .bg-strong::after { opacity: 0.7; }
@keyframes orb { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(60px, 30px) scale(1.12); } 66% { transform: translate(20px, -40px) scale(0.94); } }
/* headline words rise one after the other */
.js .w { display: inline-block; animation: word-in 900ms var(--ease) backwards; animation-delay: calc(var(--w, 0) * 80ms + 120ms); }
@keyframes word-in { from { opacity: 0; transform: translateY(0.55em) rotate(2.5deg); } }
/* the runner: a single bright dot travels up the growth line again and again */
.art-svg .runner { offset-path: path("M0 650.45H202.18L336.96 555.54L454.9 614.86L640.22 460.62L775.01 519.94L1010.88 353.84L1145.66 413.16L1415.23 235.2"); offset-rotate: 0deg; opacity: 0; animation: run 6s 1s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.art-svg .runner.glow { animation-name: run-glow; }
@keyframes run { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 90% { offset-distance: 100%; opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes run-glow { 0% { offset-distance: 0%; opacity: 0; transform: scale(1); } 6% { opacity: 1; } 50% { transform: scale(1.5); } 90% { offset-distance: 100%; opacity: 1; transform: scale(1); } 100% { offset-distance: 100%; opacity: 0; } }
/* highlighted cards: a light sweep passes over them now and then, a ring pulses on the current step */
.plan.dark, .path.on, .letter.on, .vs.on, .m-ats, .stat.hot { overflow: hidden; }
.path.on, .letter.on, .vs.on, .stat.hot, .plan.dark { position: relative; }
.plan.dark::after, .path.on::after, .letter.on::after, .vs.on::after, .m-ats::after, .stat.hot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.16) 50%, transparent 62%); transform: translateX(-110%); animation: sweep 6s 2.2s ease-in-out infinite; }
.path.on::after, .letter.on::after, .vs.on::after { background: linear-gradient(115deg, transparent 38%, rgba(113, 96, 242, 0.12) 50%, transparent 62%); }
@keyframes sweep { 0%, 60% { transform: translateX(-110%); } 100% { transform: translateX(110%); } }
.f-card.on b { position: relative; } .f-card.on b::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--brand-violet); animation: ring 2.4s ease-out infinite; }
@keyframes ring { from { transform: scale(1); opacity: 0.7; } to { transform: scale(2); opacity: 0; } }
.m-row:hover .m-track { animation-play-state: paused; } .mq-chip { transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); } .mq-chip:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 12px 24px rgba(13, 10, 46, 0.14); } .mq-chip:hover i { animation: wiggle 500ms var(--ease); }
@keyframes wiggle { 30% { transform: rotate(-14deg) scale(1.1); } 60% { transform: rotate(10deg) scale(1.1); } }
.plan-name span { animation: badge-bob 2.6s ease-in-out infinite; } @keyframes badge-bob { 50% { transform: translateY(-2px) scale(1.05); } }
/* ticks in the compare table pop in down the rows; section headings draw a short line under themselves */
.cmp[data-in] .cmp-row img { animation: pop 500ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) backwards; animation-delay: calc(var(--i, 0) * 70ms + 350ms); }
.h-l[data-reveal] { position: relative; } .h-l[data-reveal]::after { content: ""; position: absolute; left: 0; bottom: -12px; width: 64px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--brand-violet), var(--brand-secondary)); transform: scaleX(0); transform-origin: left; transition: transform 800ms 450ms var(--ease); }
.h-l[data-in]::after { transform: none; } .center .h-l[data-reveal]::after { left: 50%; margin-left: -32px; transform-origin: center; }
/* pointer: spotlight and tilt under the cursor (set by reveal.js while the mouse is over a card) */
[data-tilt] { transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateY(-5px) !important; transition: transform 140ms ease-out, box-shadow 220ms var(--ease) !important; box-shadow: 0 22px 44px rgba(13, 10, 46, 0.16);
  background-image: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(113, 96, 242, 0.14), transparent 62%) !important; }
[data-tilt].dark, .stat[data-tilt], .m-ats[data-tilt] { background-image: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.16), transparent 62%) !important; }
.tpl[data-tilt] { transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) !important; }

/* Job radar: a radar sweep turns, the rings pulse outward like sonar, the dots twinkle and the job cards blink "new" */
.rd-sweep { position: absolute; left: 50%; top: 43%; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(113, 96, 242, 0) 0deg, rgba(113, 96, 242, 0) 290deg, rgba(113, 96, 242, 0.16) 350deg, rgba(113, 96, 242, 0.34) 360deg); animation: spin 9s linear infinite; mask-image: radial-gradient(circle, #000 0, #000 68%, transparent 70%); -webkit-mask-image: radial-gradient(circle, #000 0, #000 68%, transparent 70%); }
.rd-deco .ring { animation: sonar 5s ease-out infinite; } .rd-deco .r2 { animation-delay: 1.6s; } .rd-deco .r3 { animation-delay: 3.2s; }
.rd-deco .dot { animation: twinkle 2.8s ease-in-out infinite; animation-delay: calc(var(--d, 0) * 0.7s); }
.rd-card { animation: card-in 800ms var(--ease) backwards, float 7s 1s ease-in-out infinite; animation-delay: calc(var(--d, 0) * 150ms + 300ms), calc(var(--d, 0) * 0.9s); }
.rd-card span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #22c55e; animation: blink 1.8s ease-in-out infinite; vertical-align: 1px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sonar { 0%, 100% { scale: 0.94; opacity: 0.55; } 50% { scale: 1.05; opacity: 1; } }
@keyframes twinkle { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.5); } }
@keyframes blink { 50% { opacity: 0.25; } } @keyframes card-in { from { opacity: 0; transform: translateY(24px) scale(0.92); } }
/* every hero: the art breathes and small sparks float up (the sparks are added by reveal.js) */
.hero-art img { animation: art-breathe 14s ease-in-out infinite; transform-origin: 50% 40%; } @keyframes art-breathe { 50% { transform: scale(1.035); } }
.sparks { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sparks i { position: absolute; bottom: -20px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle, rgba(113, 96, 242, 0.55), rgba(167, 139, 250, 0.12)); opacity: 0; animation: spark var(--t) linear infinite; animation-delay: var(--w); }
@keyframes spark { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 0.9; } 100% { transform: translate(var(--dx), -110vh); opacity: 0; } }
/* more section movement: flow lines draw, arrows nudge, rows light up, switches pop in, primary buttons breathe */
.flow5[data-in] .link i { transform-origin: left; animation: grow 900ms backwards; animation-delay: calc(var(--i, 0) * 120ms + 200ms); }
.flow5[data-in] .dot { animation: pop 600ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) backwards; animation-delay: calc(var(--i, 0) * 120ms); }
.what-arrow img { animation: nudge 1.8s ease-in-out infinite; } @keyframes nudge { 50% { transform: translateX(7px); } }
.cmp-row { transition: background 180ms var(--ease); } .cmp-row:not(.head):hover { background: var(--bg-surface); }
.sw-card[data-in] .sw-row img { animation: pop 600ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) backwards; } .sw-card[data-in] .sw-row:nth-child(2) img { animation-delay: 120ms; } .sw-card[data-in] .sw-row:nth-child(3) img { animation-delay: 240ms; } .sw-card[data-in] .sw-row:nth-child(4) img { animation-delay: 360ms; }
.hero .btn-row .sbtn.primary, .cta-row .sbtn.primary { animation: glow 2.8s ease-in-out infinite; } @keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(113, 96, 242, 0.45); } 50% { box-shadow: 0 0 0 11px rgba(113, 96, 242, 0); } }
@media (prefers-reduced-motion: reduce) { .sparks, .rd-sweep { display: none; } .rd-card, .rd-deco .ring, .rd-deco .dot { animation: none; } }

/* the first screen is instant: no entrance animation on what is there when a page opens (a click must show the page at once). Only the slow loops go on. */
.js .art-svg .line { animation: none; stroke-dashoffset: 0; }
.js .art-svg .area, .js .art-svg .node { animation: none; opacity: 1; }
.js .art-svg .halo { opacity: 1; animation: halo 2.6s ease-in-out infinite; }
.hero-stage .m-resume { animation: float 7s ease-in-out infinite; } .hero-stage .m-mail { animation: float 7s ease-in-out infinite; } .hero-stage .m-ats { animation: float 8s ease-in-out infinite reverse; }
.hero-stage .m-skill { animation: none; }
.js .w { animation: none; }
[data-instant], [data-instant] > * { animation: none !important; transition: none !important; opacity: 1; transform: none; }
.hero-rise > * { animation: none; }


/* the arrow head leans forward when the runner arrives */
.art-svg .head { transform-box: fill-box; transform-origin: 0 100%; animation: head-lean 6s 1s ease-in-out infinite; }
@keyframes head-lean { 0%, 80% { transform: none; } 90% { transform: translate(4px, -4px) scale(1.1); } 100% { transform: none; } }
/* a shorter first screen: the hero fits one screen; the three cards are laid out together (resume, email, score) and shrink as one piece */
.home-hero { padding: 64px var(--side) 40px; gap: 22px; min-height: 0; }
.home-hero .hero-art { inset: 0; height: 100%; } .home-hero .art-svg { position: absolute; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 1440 / 600; } /* the chart always spans the whole width; its height follows */
.home-hero h1 { max-width: 920px; }
.home-hero .hero-stage { width: 860px; height: 330px; margin-top: 6px; zoom: 1; }
.home-hero .m-resume { left: 40px; top: 0; width: 330px; padding: 22px 24px; gap: 8px; }
.home-hero .m-skills { gap: 8px 6px; } .home-hero .m-name { font-size: 22px; } .home-hero .m-label { font-size: 12px; }
.home-hero .m-skill { font-size: 13px; padding: 4px 10px; } .home-hero .m-skill img { width: 12px; height: 12px; }
.home-hero .m-pn { font-size: 15px; line-height: 22px; } .home-hero .m-pt { font-size: 14px; line-height: 21px; }
.home-hero .m-mail { left: 430px; top: 8px; width: 330px; padding: 20px 22px; gap: 8px; border-radius: 20px; }
.home-hero .m-mail b { font-size: 13px; } .home-hero .m-mail span { font-size: 15px; line-height: 22px; }
.home-hero .m-ats { left: 400px; top: 182px; width: 210px; padding: 20px 22px; border-radius: 20px; gap: 4px; }
.home-hero .m-ats strong { font-size: 54px; letter-spacing: -1.6px; } .home-hero .m-ats span { font-size: 14px; width: auto; }
@media (max-width: 960px) { .home-hero .hero-stage { zoom: 0.8; } }
@media (max-width: 800px) { .home-hero .hero-stage { zoom: 0.68; } }
@media (max-width: 720px) { .home-hero { padding: 40px var(--side) 28px; } .home-hero .hero-stage { zoom: 1; width: 100%; height: auto; } .home-hero .m-resume, .home-hero .m-mail, .home-hero .m-ats { width: 100%; max-width: 420px; } .home-hero .m-ats { width: auto; } }  /* a phone: the cards stack */
@media (prefers-reduced-motion: reduce) { .art-svg .runner, .art-svg .head { animation: none; opacity: 0; } }

/* home page polish: soft easing everywhere, a reading-progress line, filter changes that animate, calmer hover feedback.
   Only transform and opacity move; nothing here plays on the first screen. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.pill { transition: background-color 220ms var(--ease), color 220ms var(--ease), box-shadow 220ms var(--ease), transform 180ms var(--ease); }
button.pill:hover { transform: translateY(-2px); } button.pill:active { transform: scale(0.95); }
button.pill.on { animation: pill-pop 380ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)); }
@keyframes pill-pop { 40% { transform: scale(1.08); } }
.job:not([hidden]) { animation: job-in 520ms var(--ease) backwards; animation-delay: calc(var(--j, 0) * 60ms); }
.job:not([hidden]) .fit i { transform-origin: left; animation: grow 900ms 250ms var(--ease) backwards; }
@keyframes job-in { from { opacity: 0; transform: translateY(22px) scale(0.96); } }
.looking .found { animation: fade-in 300ms var(--ease) backwards; }
.radar-bar { transition: box-shadow 260ms var(--ease), transform 260ms var(--ease); } .radar-bar:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(13, 10, 46, 0.14); }
.what-step .ring { transition: transform 360ms var(--ease), box-shadow 360ms var(--ease); } .what-step:hover .ring { transform: translateY(-4px) scale(1.06) rotate(-3deg); box-shadow: 0 12px 24px rgba(113, 96, 242, 0.25); }
.svc .ico { transition: transform 320ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)); } .svc:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(13, 10, 46, 0.12); } .svc:hover .ico { transform: scale(1.12) rotate(-6deg); }
.in-short { position: relative; overflow: hidden; } .in-short::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%); transform: translateX(-120%); animation: sweep 7s 3s ease-in-out infinite; }
.more { transition: transform 260ms var(--ease), box-shadow 260ms var(--ease); } .more:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(13, 10, 46, 0.12); }
.more .go img { transition: transform 260ms var(--ease); } .more:hover .go img { transform: translateX(6px); }
.site-foot .foot-col a { transition: color 160ms var(--ease), transform 200ms var(--ease); } .site-foot .foot-col a:hover { transform: translateX(4px); }
@supports (animation-timeline: scroll()) {
  .site::before { content: ""; position: fixed; z-index: 80; left: 0; right: 0; top: 0; height: 3px; pointer-events: none; background: linear-gradient(90deg, var(--brand-secondary), var(--brand-violet)); transform: scaleX(0); transform-origin: left; animation: read linear both; animation-timeline: scroll(root block); }
  @keyframes read { to { transform: scaleX(1); } }
}
@media (prefers-reduced-motion: reduce) { .job:not([hidden]), .job:not([hidden]) .fit i, button.pill.on, .in-short::after, .site::before, .looking .found { animation: none; } }

/* site-how.css: the lower sections of "How it works": side-by-side steps, tappable points, working examples, choice cards.
   It holds: only those rules. It must not hold: the hero (site.css, site-motion.css). */
.job-step .body > .tip { max-width: 680px; padding: 12px 16px; border-radius: 14px; background: var(--bg-surface-soft); border: 1px solid var(--border-default); font: 500 15px/22px var(--font); color: var(--brand-accent-strong); min-height: 48px; animation: job-in 300ms var(--ease) backwards; }
.job-step .pills button.pill { text-align: left; }
@media (min-width: 1100px) {
  .job-step .body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 48px; align-content: start; justify-items: start; }
  .job-step .body > .demo { grid-column: 2; grid-row: 1 / span 4; justify-self: stretch; align-self: start; }
  .job-step .body > :not(.demo) { grid-column: 1; }
  .job-step .pills.tight { gap: 8px; }
}
[data-pane] { display: flex; flex-direction: column; gap: 17.4px; } [data-pane][hidden] { display: none; } [data-pane]:not([hidden]) { animation: job-in 320ms var(--ease) backwards; }
.textarea-mock.shot { color: var(--text-secondary); background: var(--bg-surface-soft); border-style: dashed; }
.paper { transition: font-family 200ms, box-shadow 300ms var(--ease); }
.paper[data-look="oxford"] { font-family: Georgia, "Times New Roman", serif; } .paper[data-look="oxford"] span { font-family: inherit; } .paper[data-look="oxford"] .nm, .paper[data-look="oxford"] .sc { color: #8a1c3a; }
.paper[data-look="nova"] .nm, .paper[data-look="nova"] .sc { color: var(--brand-primary); } .paper[data-look="nova"] { border-color: var(--brand-primary); }
button.cover { border: 0; cursor: pointer; font-family: var(--font); } button.cover.is-off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-strong); text-decoration: line-through; }
.demo-card .btns button { padding: 15.95px 26.1px; border-radius: 17.4px; font: 600 21.75px/31.9px var(--font); background: var(--brand-violet); color: #fff; transition: transform 160ms var(--ease); } .demo-card .btns button:hover { transform: translateY(-2px); } .demo-card .btns button:active { transform: scale(0.97); }
.demo-card .btns button.ghost { background: #fff; color: var(--brand-primary); box-shadow: inset 0 0 0 2.175px var(--border-strong); }
[data-sent] .life .c.off { background: var(--brand-violet); box-shadow: none; } [data-sent] .life b.dim { opacity: 1; } .life .c { transition: background-color 300ms var(--ease); }
.toggle-btn { border: 0; background: none; padding: 0; cursor: pointer; line-height: 0; } .demo-card .toggle { transition: opacity 200ms var(--ease), filter 200ms var(--ease); }
.demo-card.is-off .toggle { filter: grayscale(1); opacity: 0.55; } .demo-card.is-off .rule-row { opacity: 0.4; transition: opacity 200ms var(--ease); }
.rule-row button { border: 0; cursor: pointer; background: transparent; padding: 8.7px 17.4px; border-radius: 14.5px; box-shadow: inset 0 0 0 1.45px var(--border-input); font: 600 18.85px/normal var(--font); color: inherit; transition: box-shadow 160ms var(--ease), background-color 160ms var(--ease); } .rule-row button:hover { background: var(--bg-surface); box-shadow: inset 0 0 0 1.45px var(--brand-violet); }
.fork > div { transition: opacity 300ms var(--ease), transform 300ms var(--ease), box-shadow 300ms var(--ease); }
.fork[data-pick-target="yes"] .no, .fork[data-pick-target="no"] .yes { opacity: 0.45; transform: scale(0.98); }
.fork[data-pick-target="no"] .no { background: #fff; border: 2px solid var(--brand-violet); box-shadow: 0 10px 26px rgba(13, 10, 46, 0.1); } .fork[data-pick-target="no"] .yes { background: var(--bg-surface-soft); border: 1px solid var(--border-default); box-shadow: none; }
.svc ul.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .svc ul.ticks li { font: 500 14px/20px var(--font); color: var(--text-secondary); padding-left: 22px; position: relative; } .svc ul.ticks li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 6px; height: 10px; border: solid var(--brand-violet); border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (max-width: 640px) {
  .job-step { flex-direction: column; gap: 12px; } .job-step .rail { flex-direction: row; } .job-step .rail i { display: none; } .job-step .body { padding-bottom: 36px; gap: 12px; }
  .job-step .pills.tight { gap: 6px; } .job-step .pills .pill { font-size: 12px; padding: 6px 10px; white-space: normal; }
  .demo { padding: 8px; border-radius: 16px; } .demo-card { padding: 16px; gap: 12px; border-radius: 18px; }
  .demo-card h4 { font-size: 18px; } .cat { padding: 12px; gap: 8px; } .cat b { font-size: 15px; }
  .skill-big { font-size: 13px; padding: 4px 10px; white-space: nowrap; margin-bottom: 6px; } .skill-big img { width: 12px; height: 12px; }
  .badge-lg { font-size: 12px; padding: 4px 10px; white-space: normal; } .textarea-mock { font-size: 14px; line-height: 22px; padding: 12px; }
  .seg { flex-wrap: wrap; } .seg button, .seg span { font-size: 13px; padding: 8px 10px; }
  .paper { padding: 16px; } .paper .nm { font-size: 18px; } .mailbox { padding: 16px; } .mailbox p, .demo-card .big-p { font-size: 14px; line-height: 21px; }
  .rule-row { flex-wrap: wrap; gap: 6px; } .rule-row span:first-child { font-size: 14px; flex: 1 1 100%; } .rule-row button { font-size: 14px; padding: 6px 12px; }
  .demo-card .btns button { font-size: 14px; padding: 10px 16px; border-radius: 12px; } .life b { font-size: 13px; } .life { gap: 6px; } .cover { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .job-step .body > .tip, [data-pane] { animation: none; } }

/* site-features.css: the Features page controls: step cards that switch the panel, real switches, defaults that can be tried, and the phone layout.
   It holds: only those rules. */
button.f-card { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; } button.f-card:focus-visible, .sw-toggle:focus-visible, button.def-card:focus-visible { outline: 2px solid var(--brand-violet); outline-offset: 2px; }
button.f-card:active { transform: scale(0.98); }
.fp { display: flex; flex-direction: column; gap: 20px; } .fp[hidden] { display: none; } .fp:not([hidden]) { animation: job-in 360ms var(--ease) backwards; }
.sw-toggle { flex: none; border: 0; background: none; padding: 0; cursor: pointer; line-height: 0; border-radius: 12px; transition: transform 160ms var(--ease); } .sw-toggle:hover { transform: scale(1.06); } .sw-toggle:active { transform: scale(0.94); } .sw-toggle img { transition: opacity 160ms var(--ease); }
button.def-card { font: inherit; color: inherit; text-align: left; cursor: pointer; align-items: flex-start; } .def-card { height: auto; min-height: 100px; }
.def-card i { margin-top: auto; font: 600 12px/normal var(--font); color: var(--brand-accent-strong); opacity: 0; transition: opacity 180ms var(--ease); } button.def-card:hover i, button.def-card:focus-visible i { opacity: 1; }
button.def-card:active { transform: scale(0.97); } @media (hover: none) { .def-card i { opacity: 1; } }
button.ctl-tag { font: 600 13px/normal var(--font); padding: 7px 12px; border: 1px solid var(--border-input); border-radius: 10px; background: #fff; color: inherit; cursor: pointer; transition: border-color 160ms var(--ease), transform 160ms var(--ease); } button.ctl-tag:hover { border-color: var(--brand-violet); transform: translateY(-2px); } button.ctl-tag:active { transform: scale(0.96); }
.ctl .sbtn { cursor: pointer; } .ctl .sbtn:active { transform: scale(0.96); }
@media (max-width: 1000px) { .f-steps { align-items: stretch; } .f-panel { width: 100%; min-width: 0; } .f-mock { width: 100%; } }
@media (max-width: 640px) {
  .f-panel { padding: 20px; border-radius: 20px; gap: 14px; } .f-panel h2 { font-size: 24px; } .f-panel > p, .fp > p { font-size: 15px; line-height: 23px; } .fp { gap: 14px; }
  .f-mock { padding: 14px; } .f-mock-row { flex-wrap: wrap; } .f-mock-row em { font-size: 12px; }
  .f-card { padding: 14px; gap: 12px; } .f-card h3 { font-size: 16px; }
  .sw-row { padding: 16px; gap: 12px; } .sw-row b { font-size: 15px; }
  .mq-chip { height: 48px; font-size: 14px; padding: 0 16px 0 10px; gap: 8px; } .mq-chip i { width: 30px; height: 30px; }
  .def-card { padding: 18px; } .def-card b { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .fp:not([hidden]) { animation: none; } }