/* Marketing styles are scoped to the homepage; application pages keep their own UI. */
body[data-page="index"] {
  --marketing-paper: #ffffff;
  --marketing-pale: #eaf0fa;
  --marketing-muted: #536077;
  --marketing-on-dark: #d5e0f5;
  background: var(--marketing-paper);
}

body[data-page="index"] .container {
  width: min(1200px, calc(100% - 80px));
}

body[data-page="index"] .site-header,
body[data-page="index"] footer {
  border: 0;
  background: var(--marketing-paper);
}

body[data-page="index"] .nav { min-height: 96px; }
body[data-page="index"] .brand-mark { border-radius: 0; }
body[data-page="index"] .nav-links { gap: 26px; }

body[data-page="index"] :is(a, button, summary, select):focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 5px;
}

body[data-page="index"] .nav-links > a,
body[data-page="index"] #account-nav > a,
body[data-page="index"] .text-link,
body[data-page="index"] .logout {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

body[data-page="index"] .button {
  min-height: 52px;
  border: 0;
  border-radius: 0;
  padding: 14px 24px;
  gap: 16px;
}

body[data-page="index"] .button.small {
  min-height: 44px;
  padding: 10px 18px;
}

body[data-page="index"] .hero {
  padding: 48px 0 84px;
  background: var(--marketing-paper);
  border: 0;
}

body[data-page="index"] .hero-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
}

body[data-page="index"] .hero h1 {
  margin: 0 0 30px;
  font-size: clamp(48px, 5.15vw, 76px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.045em;
}

body[data-page="index"] .intro {
  max-width: 30em;
  font-size: 18px;
  line-height: 1.85;
  color: var(--ink);
}

body[data-page="index"] .hero-actions { margin: 30px 0 18px; gap: 12px; }
body[data-page="index"] .hero-assurance {
  margin: 0;
  font-size: 16px;
  color: var(--ink);
}

body[data-page="index"] .hero-visual { max-width: none; margin: 0; }
body[data-page="index"] .hero-visual figcaption { margin-top: 12px; font-size: 16px; }
body[data-page="index"] .hero-visual img {
  aspect-ratio: 1 / 1.06;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  box-shadow: none; /* taste-skill-ignore: removes the inherited photo shadow */
}

body[data-page="index"] .marketing-section { padding: 80px 0; }
body[data-page="index"] h2 {
  font-size: clamp(28px, 3.05vw, 42px);
  line-height: 1.35;
  letter-spacing: -.035em;
}

body[data-page="index"] .section-heading {
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 34px;
}

body[data-page="index"] .section-heading p {
  max-width: 36em;
  margin: 14px 0 0;
  color: var(--marketing-muted);
}

body[data-page="index"] :is(ul.service-list, .service-list > ul) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 72px;
  padding: 0;
  margin: 0;
  list-style: none;
}

body[data-page="index"] .service-list li { min-width: 0; }
body[data-page="index"] .service-list li > a {
  display: block;
  min-height: 104px;
  margin: 0 -16px;
  padding: 20px 16px;
  color: var(--ink);
}

body[data-page="index"] .service-list li > a:hover {
  background: var(--marketing-pale);
  text-decoration: none;
}

body[data-page="index"] .service-list li > a > span {
  display: block;
  font-size: 23px;
  line-height: 1.4;
  font-weight: 750;
  letter-spacing: -.02em;
}

body[data-page="index"] .service-list small {
  display: block;
  margin-top: 7px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--marketing-muted);
}

body[data-page="index"] .client-section {
  background: var(--ink);
  color: var(--marketing-paper);
}

body[data-page="index"] .client-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}

body[data-page="index"] .client-heading h2 { margin: 0; }
body[data-page="index"] .client-heading p { margin: 0 0 24px; color: var(--marketing-on-dark); }
body[data-page="index"] :is(ol.client-steps, .client-steps > ol) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  padding: 0 0 0 24px;
  margin: 52px 0 38px;
}

body[data-page="index"] .client-steps li { min-width: 0; padding-left: 6px; }
body[data-page="index"] .client-steps li::marker { color: var(--marketing-on-dark); font-weight: 700; }
body[data-page="index"] .client-steps h3 { margin: 0 0 14px; font-size: 22px; }
body[data-page="index"] .client-steps p { margin: 0; color: var(--marketing-on-dark); }
body[data-page="index"] .client-section .button {
  background: var(--marketing-paper);
  color: var(--ink);
  border-color: var(--marketing-paper);
}

body[data-page="index"] .client-section .button:hover { background: var(--marketing-pale); }
body[data-page="index"] .client-section :is(a, button):focus-visible { outline-color: var(--marketing-paper); }
body[data-page="index"] .availability-note {
  max-width: 68em;
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--marketing-on-dark);
}

body[data-page="index"] .client-section .availability-note a { color: inherit; text-decoration: underline; }
body[data-page="index"] .job-card { border: 0; border-radius: 0; background: var(--soft); box-shadow: none; /* taste-skill-ignore: removes inherited job-card shadow */ }
body[data-page="index"] .job-card:hover { background: var(--marketing-pale); box-shadow: none; /* taste-skill-ignore: removes inherited hover shadow */ }
body[data-page="index"] .empty {
  border: 0;
  border-radius: 0;
  background: var(--soft);
  padding: 36px;
}

body[data-page="index"] .empty h2 { font-size: 24px; }
body[data-page="index"] .freelancer-invite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 44px;
  padding: 32px 0 0;
}

body[data-page="index"] .freelancer-invite h3 { margin: 0 0 10px; font-size: 24px; }
body[data-page="index"] .freelancer-invite p {
  max-width: 44em;
  margin: 0;
  color: var(--marketing-muted);
  font-size: 16px;
}
body[data-page="index"] .freelancer-invite .hint { margin-top: 12px; }

body[data-page="index"] .freelancer-invite .button { flex-shrink: 0; }
body[data-page="index"] .faq-section { background: var(--marketing-pale); }
body[data-page="index"] .faq-layout {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr);
  gap: 72px;
  align-items: start;
}

body[data-page="index"] .faq-layout > :first-child > p { color: var(--marketing-muted); }
body[data-page="index"] .faq-list { min-width: 0; }
body[data-page="index"] .faq-list details { padding: 0 0 22px; }
body[data-page="index"] .faq-list details:last-child { padding-bottom: 0; }
body[data-page="index"] .faq-list summary {
  min-height: 44px;
  padding: 8px 4px 8px 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
}

body[data-page="index"] .faq-list summary:hover { color: var(--blue); }
body[data-page="index"] .faq-list details p {
  margin: 10px 0 4px;
  color: var(--marketing-muted);
  line-height: 1.9;
}

body[data-page="index"] .faq-list details a { text-decoration: underline; text-underline-offset: 3px; }
body[data-page="index"] .closing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
}

body[data-page="index"] .closing-layout p { color: var(--marketing-muted); margin-bottom: 0; }
body[data-page="index"] .start-brief { min-width: 0; }
body[data-page="index"] .start-brief label { margin: 0 0 12px; font-size: 16px; }
body[data-page="index"] .start-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
}

body[data-page="index"] .start-controls select {
  min-height: 56px;
  border: 1px solid var(--marketing-muted);
  border-radius: 0;
  padding: 12px;
}

body[data-page="index"] .start-controls button { min-height: 56px; }
body[data-page="index"] .start-brief .hint { font-size: 13px; }
body[data-page="index"] footer { margin-top: 0; padding: 32px 0 42px; }
body[data-page="index"] .footer-inner a { min-height: 44px; display: inline-flex; align-items: center; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes marketing-arrive {
    from { transform: translateY(12px); }
    to { transform: translateY(0); }
  }
  body[data-page="index"] :is(.hero-copy, .hero-visual, .marketing-enter) {
    animation: marketing-arrive 480ms ease-out both;
  }
  body[data-page="index"] .hero-visual { animation-duration: 650ms; }
}

@media (max-width: 1000px) {
  body[data-page="index"] .container { width: calc(100% - 56px); }
  body[data-page="index"] .hero-grid { gap: 32px; }
  body[data-page="index"] .hero h1 { font-size: clamp(44px, 5.1vw, 60px); }
  body[data-page="index"] .hero-actions .button { padding: 13px 18px; }
  body[data-page="index"] :is(.client-heading, .faq-layout, .closing-layout) { gap: 40px; }
  body[data-page="index"] :is(ol.client-steps, .client-steps > ol) { gap: 32px; }
  body[data-page="index"] .start-controls { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  body[data-page="index"] .nav-links > .desktop { display: none; }
  body[data-page="index"] .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  body[data-page="index"] .hero h1 { font-size: clamp(46px, 7.5vw, 64px); }
  body[data-page="index"] .hero-visual img { aspect-ratio: 4 / 3; }
  body[data-page="index"] .hero-copy .intro { max-width: 36em; }
  body[data-page="index"] .hero { padding: 34px 0 52px; }
  body[data-page="index"] .marketing-section { padding: 64px 0; }
  body[data-page="index"] :is(ul.service-list, .service-list > ul) { column-gap: 40px; }
  body[data-page="index"] :is(ol.client-steps, .client-steps > ol) { grid-template-columns: 1fr; gap: 28px; }
  body[data-page="index"] .client-steps h3 { margin-bottom: 8px; }
  body[data-page="index"] .faq-layout { grid-template-columns: 1fr; gap: 24px; }
  body[data-page="index"] .freelancer-invite { align-items: flex-start; flex-direction: column; gap: 22px; }
}

@media (max-width: 640px) {
  body[data-page="index"] .container { width: calc(100% - 40px); }
  body[data-page="index"] .nav { min-height: 0; padding-top: 20px; padding-bottom: 16px; gap: 14px; }
  body[data-page="index"] .nav-links { gap: 12px; }
  body[data-page="index"] .nav-links .button { padding: 10px 12px; font-size: 12px; }
  body[data-page="index"] .hero { padding-top: 28px; padding-bottom: 42px; }
  body[data-page="index"] .hero h1 { font-size: clamp(40px, 11.8vw, 56px); margin-bottom: 24px; }
  body[data-page="index"] .intro { font-size: 16px; }
  body[data-page="index"] .hero-actions { margin-top: 26px; gap: 10px; }
  body[data-page="index"] .hero-actions .button { padding: 13px 16px; font-size: 15px; }
  body[data-page="index"] .hero-assurance { font-size: 16px; }
  body[data-page="index"] .hero-grid { gap: 30px; }
  body[data-page="index"] .marketing-section { padding: 48px 0; }
  body[data-page="index"] .section-heading { flex-direction: column; gap: 12px; margin-bottom: 22px; }
  body[data-page="index"] .section-heading p { margin-top: 12px; }
  body[data-page="index"] h2 { font-size: 29px; }
  body[data-page="index"] :is(ul.service-list, .service-list > ul) { grid-template-columns: 1fr; gap: 2px; }
  body[data-page="index"] .service-list li > a { min-height: 92px; padding-top: 16px; padding-bottom: 16px; }
  body[data-page="index"] .service-list li > a > span { font-size: 22px; }
  body[data-page="index"] :is(.client-heading, .closing-layout) { grid-template-columns: 1fr; gap: 24px; }
  body[data-page="index"] :is(ol.client-steps, .client-steps > ol) { margin-top: 34px; margin-bottom: 30px; }
  body[data-page="index"] .empty { padding: 24px; }
  body[data-page="index"] .freelancer-invite { margin-top: 28px; padding-top: 20px; }
  body[data-page="index"] .faq-list summary { font-size: 17px; }
  body[data-page="index"] .faq-list details { padding-bottom: 18px; }
  body[data-page="index"] .start-controls { grid-template-columns: 1fr; }
  body[data-page="index"] .footer-inner { gap: 12px; }
  body[data-page="index"] footer { padding-top: 20px; padding-bottom: 28px; }
}