/* Tinker page styles */

/* CSS Custom Properties for Tinker content padding */
:root {
  --tinker-padding-desktop: max(2rem, calc((100vw - 1000px) / 2)); /* 1024px+; 2rem gutter matches inkling + site baseline */
  --tinker-padding-mid: 2rem; /* 641-1024px */
  --tinker-padding-mobile: 0.8rem; /* 640px and below */
  --tinker-col-gap: 2.25rem; /* shared column gap for page grids (features/models/lora/customers) */
  --tinker-two-column-max: 952px;
  --tinker-two-column-padding: max(
    2rem,
    calc((100vw - var(--tinker-two-column-max)) / 2)
  );
}

/* Tinker page layout adjustments */
body:has(.tinker-hero-section) #main {
  padding-top: 0; /* Remove only top padding to close gap under navbar */
  max-width: none; /* Allow full width */
  animation: fadeIn 0.3s ease-in-out; /* Faster animation to match header */
}

body:has(.tinker-hero-section) #main article.content {
  margin: 0;
  padding: 0;
  max-width: none;
}


/* Hero viewport section - full viewport width edge-to-edge */
.tinker-hero-section {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 0rem 0 6rem 0 !important; /* Reduced top padding to move hero higher */
  /* Break out to full viewport width */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Add top padding on mobile to account for fixed header */
@media screen and (max-width: 640px) {
  .tinker-hero-section {
    padding-top: 50px !important; /* Match fixed header height on mobile */
  }
}


/* Wrapper for hero section */
.tinker-hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 1rem;
  padding-bottom: 0.5rem;
  /* Center content with proper horizontal padding */
  width: 100%;
  max-width: 100%;
  padding-left: var(--tinker-padding-desktop);
  padding-right: var(--tinker-padding-desktop);
  box-sizing: border-box;
}

/* Position BETA badge above title, reusing home-announcement styles */
.tinker-beta-announcement {
  margin-top: 1.2rem;
  margin-bottom: 0.7rem !important;
}

/* Tinkertoy cover image above title */
.tinker-cover-image {
  width: 100%;
  max-width: 720px;
  margin-bottom: 3rem !important;
  opacity: 1;
  transform: translateY(0);
}

.tinker-cover-image.animate-in {
  opacity: 0;
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0s forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tinker-cover-image img {
  width: 100%;
  height: auto;
  max-height: min(450px, 50vh);
  min-height: 200px;
  object-fit: contain;
  display: block;
  margin-bottom: 0;
}

.tinker-cover-image svg {
  width: 100%;
  height: 100%;
  max-height: min(450px, 50vh);
  min-height: 180px;
  display: block;
  margin-bottom: 0;
}

/* Show desktop version by default, hide mobile */
.tinker-cover-desktop {
  display: block;
}

.tinker-cover-mobile {
  display: none;
}

/* On mobile (640px and below), show mobile version and hide desktop */
@media (max-width: 640px) {
  .tinker-cover-desktop {
    display: none;
  }
  
  .tinker-cover-mobile {
    display: block;
    margin-bottom: 0rem !important;
  }
  
  /* Reduce gap between caption and title on mobile */
  .tinker-cover-image {
    margin-bottom: 1.75rem !important;
  }

} /* Cache bust 2025-10-04 */

@media (min-width: 768px) {
  .tinker-cover-image img,
  .tinker-cover-image svg {
    min-height: 360px;
  }
}

.tinker-cover-caption,
.content .tinker-cover-caption {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg5);
  text-align: center;
  margin-top: 0.25rem !important;
  margin-bottom: 0 !important;
}

.tinker-cover-caption a {
  color: inherit;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.tinker-cover-caption a:hover {
  color: var(--fg2);
  text-decoration: underline !important;
  text-decoration-color: color-mix(in srgb, var(--fg2) 40%, transparent) !important;
  text-underline-offset: 2px;
}

/* Prevent widow - keep "and Brian Silverman" together on mobile */
@media (max-width: 640px) {
  .tinker-cover-caption a:last-of-type {
    white-space: nowrap;
  }
}

.tinker-title {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(1.8em, 8vw, 2.3em) !important; /* responsive scaling like home page */
  color: var(--fg);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  opacity: 1;
  transform: translateY(0);
}

.tinker-title.animate-in {
  opacity: 0;
  animation: fadeInUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

/* Override global non-blog h1 serif rule */
#main.content article.content h1.tinker-title {
  font-family: var(--font-serif) !important;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(3em, 8vw, 3.4em); /* ensure override beats global non-blog h1 size */
  line-height: 1.1;
  margin-top: 0;
  margin-bottom: 1.2rem;
  /* Remove global 480px cap and keep centered */
  max-width: none !important;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Center title inside hero */
.tinker-hero .tinker-title {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.tinker-subtitle {
  font-family: var(--font-sans);
  font-size: 1rem !important;
  line-height: 1.6;
  color: var(--fg2);
  max-width: 390px;
  margin-top: 0.4rem;
  margin-bottom: 2rem !important;
  text-align: center;
  opacity: 1;
  transform: translateY(0);
}

.tinker-subtitle.animate-in {
  opacity: 0;
  animation: fadeInUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

/* Rotating word + sparkle effect */
.tinker-title .tinker-rotate {
  position: relative;
  display: inline-grid;
  color: var(--fg);
  font-style: italic;
  justify-items: start;
}

/* Ghost element reserves space for longest word to prevent layout shift */
.tinker-title .tinker-rotate::after {
  content: 'researchers';
  height: 0;
  visibility: hidden;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
}

/* Blur in/out support layered with sparkles */
.tinker-title .tinker-rotate {
  transition: filter 300ms ease, opacity 300ms ease;
}
.tinker-title .tinker-rotate.is-blurring {
  filter: blur(4px);
  opacity: 0.2;
}

/* Container overlay for sparkles; lightweight and removed after each cycle */
.tinker-sparkle-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  mix-blend-mode: normal; /* normal blend for dark sparkles on white */
}

.tinker-sparkle-dot {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffffff; /* white sparkle */
  /* multi-layer glow for a bright, sparkly effect */
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.9),
    0 0 14px rgba(255, 255, 255, 0.6),
    0 0 26px rgba(255, 255, 255, 0.4);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.3);
  animation: tinker-sparkle 700ms ease-out forwards;
  will-change: transform, opacity;
}

@keyframes tinker-sparkle {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(var(--scaleStart, 0.4));
  }
  25% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -8px))) scale(var(--scaleEnd, 1));
  }
}

/* Scroll-based fade-in for sections */
.scroll-fade {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* When scrolling into view, slide up */
.scroll-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* When already visible on page load, just fade in place */
.scroll-fade.in-viewport-on-load {
  opacity: 0;
  transform: translateY(0);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-fade.in-viewport-on-load.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .tinker-sparkle-dot { animation: none; }
  .tinker-cover-image,
  .tinker-title,
  .tinker-subtitle,
  .tinker-cta-row {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .scroll-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* CTA button row */
.tinker-cta-row {
  display: flex;
  justify-content: center;
  opacity: 1;
  transform: translateY(0);
}

/* Add optical balance - primary button has visible padding, plain buttons have hidden padding until hover */
.tinker-cta-row .btn.primary {
  margin-right: 1.4em;
}

.tinker-cta-row.animate-in {
  opacity: 0;
  animation: fadeInUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

/* Buttons with chevron icon */
.btn-with-chevron {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.btn-with-chevron svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease-in-out;
}

.btn-with-chevron svg path {
  fill: currentColor;
  opacity: 0.4;
  transition: opacity 0.2s ease-in-out;
}

.btn-with-chevron:hover svg {
  transform: translateX(3px);
}

.btn-with-chevron:hover svg path {
  opacity: 0.7;
}

@media (max-width: 640px) {
  /* Join waitlist on first row, Announcement and Docs inline on second row */
  .tinker-cta-row {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
  }
  .tinker-cta-row .btn:first-child {
    flex: 1 1 100%;
    margin-bottom: 1.5rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-height: 44px;
  }
  /* Ensure remaining buttons on second row are centered */
  .tinker-cta-row .btn:not(:first-child) {
    flex: 0 0 auto;
  }
}

@media (max-width: 768px) {
  .tinker-subtitle {
    font-size: 1em;
  }
}


/* Section wrapper spacing */
.tinker-section {
  position: relative;
  z-index: 1;
  margin-top: 2.5rem !important; /* gap after hero section */
  background-color: white;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  /* Global padding for all sections with 1000px max content width */
  padding-left: var(--tinker-padding-desktop);
  padding-right: var(--tinker-padding-desktop);
}

/* Larger gap for sections after the first */
.tinker-section + .tinker-section {
  margin-top: 6.5rem !important;
}


/* Tinker secondary headings */
.tinker-h2 {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500 !important;
  font-size: 1.65rem !important;
  line-height: 40px;
  text-align: center;
  /* letter-spacing: -0.2px; */
  margin: 0 0 2rem 0 !important; /* space under section titles */
  color: var(--fg);
}

/* Keep Tinker section subheadings non-italic even when using h4 semantics */
.content h4.tinker-h2 {
  font-style: normal !important;
}

/* Reduce gap when h2 is followed by subtitle */
.tinker-h2:has(+ .tinker-h2-subtitle) {
  margin-bottom: 0.2rem !important;
}

/* Reduce gap for FAQ heading */
.tinker-section:has(.tinker-faq) .tinker-h2 {
  margin-bottom: 1rem !important;
}

/* Subtitle under h2 headings */
.tinker-h2-subtitle {
  font-family: var(--font-sans);
  font-size: 1em;
  text-align: center;
  color: var(--fg3);
  margin: 0 0 2rem 0 !important;
}

/* Placeholders for modules */
.tinker-features,
.tinker-models,
.tinker-lora {
  margin-top: 1rem;
}

/* Ensure white backgrounds for content areas below dark section */
.tinker-models,
.tinker-lora,
.tinker-faq {
  background-color: white;
}


/* Full-bleed container with centered inner content up to 1000px.
   .tinker-customers shares this block instead of re-declaring it. */
.tinker-features,
.tinker-models,
.tinker-customers,
.tinker-lora {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
  /* Re-apply padding since these break out of parent .tinker-section */
  padding-left: var(--tinker-padding-desktop);
  padding-right: var(--tinker-padding-desktop);
}

/* Features grid */
.tinker-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tinker-col-gap);
  margin-top: 1.4rem !important;
}

/* Supported models row */
.tinker-models {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--tinker-col-gap);
  align-items: start;
  margin-top: 1.4rem !important;
}

.tinker-model-column {
  display: flex;
  flex-direction: column;
  gap: var(--tinker-col-gap);
  grid-column: span 2;
}

/* Model card - similar styling to feature cards */
.tinker-model-card {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  box-sizing: border-box;
  height: auto;
  margin-bottom: 0 !important;
}

/* Header with logo and title */
.tinker-model-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem !important;
  text-decoration: none !important;
}

.tinker-model-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 3px;
  /* Faint boundary so light/white brand marks still read on the white bg. */
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 6px;
  background: var(--bg);
}

.tinker-model-logo svg {
  width: auto;
  height: 100%;
  filter: grayscale(100%);
  transition: filter 0.2s ease-in-out;
}

.tinker-model-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

.tinker-model-header:hover .tinker-model-logo svg {
  filter: grayscale(0%);
}

.tinker-model-title {
  font-family: var(--font-sans);
  font-size: 0.7em;
  font-weight: 500;
  color: color-mix(in srgb, var(--fg) 60%, transparent);
  letter-spacing: 1px;
  margin: 0 !important;
  transition: color 0.2s ease-in-out;
}

/* Override global .content h3 styles */
.content .tinker-model-title {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  font-size: 0.7em !important;
  font-weight: 500 !important;
  color: color-mix(in srgb, var(--fg) 60%, transparent) !important;
  letter-spacing: 1px !important;
  margin: 0 !important;
}

.tinker-model-header:hover .tinker-model-title,
.content .tinker-model-header:hover .tinker-model-title {
  color: var(--fg) !important;
}

/* Ensure no underlines on model header links */
.content .tinker-model-header,
.content .tinker-model-header:hover {
  text-decoration: none !important;
}


/* Model list container */
.tinker-model-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Individual model row */
.tinker-model-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
  padding: 0.4rem 0.5rem;
  margin: 0 -0.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 0 !important;
  font-size: 1rem !important;
  transition: background-color 0.2s ease-in-out;
}

.tinker-model-item:has(a:hover) {
  background-color: color-mix(in srgb, var(--fg) 3%, transparent);
}

.tinker-model-item:last-child {
  border-bottom: none;
}

/* Stacked text container (name + optional retiring note) */
.tinker-model-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-width: 0;
  /* Cancel the global `.content div` bottom margin (typography.css) that would
     otherwise push the row text up and leave a gap below it. */
  margin-bottom: 0 !important;
}

/* Inline row so a "NEW" pill can sit beside the model name (the info container
   itself is a vertical stack for name + optional sub-labels). */
.tinker-model-name-row {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

/* "NEW" pill — mirrors the home-announcement pill, but theme-aware. */
.tinker-model-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  height: 20px;
  font-family: var(--font-sans);
  font-weight: 450;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--fg1);
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  border-radius: 100px;
  flex-shrink: 0;
}

/* "COMING SOON" pill — outlined (no fill) variant for unreleased models. */
.tinker-model-pill-soon {
  color: var(--gray);
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 20%, transparent);
}

/* Model name - use site default sans (GT America) */
.tinker-model-name {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--fg) !important;
  text-decoration: none !important;
  transition: opacity 0.3s ease-in-out !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tinker-model-name:hover {
  text-decoration: underline !important;
  text-decoration-color: color-mix(in srgb, var(--fg) 20%, transparent) !important;
  text-underline-offset: 2px !important;
}

/* Override .content a styles */
.content .tinker-model-name {
  color: var(--fg) !important;
  text-decoration: none !important;
  transition: opacity 0.3s ease-in-out !important;
}

.content .tinker-model-name:hover {
  color: var(--fg) !important;
  text-decoration: underline !important;
  text-decoration-color: color-mix(in srgb, var(--fg) 20%, transparent) !important;
  text-underline-offset: 2px !important;
}

/* Non-linked model name (e.g. a model that isn't available yet) — no hover
   affordance. Placed after the base rules so it wins on source order. */
.tinker-model-name-static,
.content .tinker-model-name-static {
  color: var(--fg3) !important;
  cursor: default;
}

.tinker-model-name-static:hover,
.content .tinker-model-name-static:hover {
  text-decoration: none !important;
  color: var(--fg3) !important;
}

/* "Retiring June 12" sub-label on model rows */
.tinker-model-retiring,
.content .tinker-model-retiring {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--fg4) !important;
  text-decoration: none !important;
  width: fit-content;
}

.tinker-model-retiring:hover,
.content .tinker-model-retiring:hover {
  color: var(--fg) !important;
  text-decoration: underline !important;
  text-decoration-color: color-mix(in srgb, var(--fg) 20%, transparent) !important;
  text-underline-offset: 2px !important;
}

/* Model type (Dense/MoE) */
.tinker-model-type {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--fg4);
  flex-shrink: 0;
  margin-left: 1rem;
}

@media (max-width: 1024px) {
  .tinker-features { 
    grid-template-columns: repeat(2, 1fr); 
    gap: 3rem 3rem;
    position: static !important;
    width: 100% !important;
    max-width: 660px !important;
    left: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .tinker-feature-card { 
    text-align: left; 
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .tinker-feature-card .tinker-feature-body { max-width: 100%; }
  .tinker-feature-icon { margin-bottom: 0.05rem !important; }
  
  .tinker-feature-title,
  .content h3.tinker-feature-title,
  .content .tinker-feature-card .tinker-feature-title {
    margin: 0.6em 0 0.5em 0 !important;
  }
  
  /* Stack models at same breakpoint as features 2x2 grid */
  .tinker-models { 
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }

  .tinker-model-column {
    display: contents;
  }

  .tinker-model-card-nvidia,
  .tinker-model-card-qwen,
  .tinker-model-card-llama,
  .tinker-model-card-deepseek,
  .tinker-model-card-gptoss,
  .tinker-model-card-moonshot {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  /* When models stack to single column, match FAQ width */
  .tinker-section .tinker-models { 
    position: static !important;
    width: 100% !important;
    max-width: 660px !important;
    left: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Stack LoRA section at same breakpoint */
  .tinker-lora-card {
    grid-template-columns: 1fr !important;
    gap: 5.5rem;
  }
  
  .tinker-lora-column {
    align-items: center !important;
  }

  .tinker-lora-content {
    max-width: 100% !important;
    text-align: center !important;
    align-items: center !important;
  }

  .tinker-lora-heading {
    text-align: center !important;
  }
  
  .tinker-lora-description {
    max-width: 75% !important;
  }

  .tinker-cookbook-content .tinker-lora-description {
    max-width: min(75%, 24.5rem) !important;
  }
  
  .tinker-lora-link {
    align-self: center !important;
  }
  
  .tinker-lora-visual {
    width: 100%;
    max-width: 500px;
    align-self: center;
    justify-content: center;
  }

  .tinker-lora-visual .tinker-lora-mini {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .tinker-cookbook-visual {
    width: 100%;
    align-self: center;
    justify-content: center;
  }
  
  .tinker-lora-visual img,
  .tinker-lora-visual svg {
    width: 100%;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .tinker-hero,
  .tinker-section {
    padding-left: var(--tinker-padding-mid);
    padding-right: var(--tinker-padding-mid);
  }
  /* Re-apply to full-bleed containers that break out */
  .tinker-features,
  .tinker-models,
  .tinker-lora {
    padding-left: var(--tinker-padding-mid);
    padding-right: var(--tinker-padding-mid);
  }
}

@media (max-width: 640px) {
  /* Reduce wrapper padding on mobile for Tinker page */
  body:has(.tinker-hero-section) #wrapper {
    padding: 0 0.25rem;
  }
  
  /* Smaller padding on mobile */
  .tinker-hero,
  .tinker-section {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
  .tinker-features,
  .tinker-lora {
    padding-left: var(--tinker-padding-mobile);
    padding-right: var(--tinker-padding-mobile);
  }
  
  /* Models and FAQ: kill left/right padding for full width on mobile */
  .tinker-section:has(.tinker-models),
  .tinker-section:has(.tinker-faq) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .tinker-section .tinker-models,
  .tinker-faq {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important; /* Override 660px constraint from tablet breakpoint */
  }
  
  .tinker-features { grid-template-columns: 1fr; gap: 2.5rem; }
  
  /* Center-align feature cards when stacked */
  .tinker-feature-card {
    text-align: center !important;
    align-items: center !important;
  }
  
  .tinker-feature-title,
  .content h3.tinker-feature-title,
  .content .tinker-feature-card .tinker-feature-title {
    margin: 0.6em 0 0.5em 0 !important;
  }
  
  .tinker-feature-card .tinker-feature-body {
    width: 260px !important;
  }
  
  /* Remove fixed height on model cards for mobile */
  .tinker-model-card {
    height: auto;
  }
  
  /* Constrain LoRA visual on mobile */
  .tinker-lora-visual {
    width: 85% !important;
    max-width: 500px !important;
  }

  .tinker-cookbook-visual img,
  .tinker-cookbook-visual svg {
    width: 54px !important;
    height: 54px !important;
    max-width: 54px !important;
    margin: 0 auto !important;
  }
  
  /* FAQ: full width on mobile, kill all padding/margins */
  .tinker-faq {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .tinker-faq-item {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .tinker-faq-question {
    padding: 1.25rem 2rem 1.25rem 0 !important;
  }
  
  .tinker-faq-answer {
    padding-right: 0 !important;
  }
}

/* Feature card */
.tinker-feature-card {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  box-sizing: border-box;
}

.tinker-feature-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 0.2rem !important;
  transition: transform 0.3s ease;
}

.tinker-feature-icon img,
.tinker-feature-icon svg {
  width: 24px;
  height: 24px;
  display: block;
  filter: none;
}

/* Subtle icon animation on hover */
.tinker-feature-card:hover .tinker-feature-icon {
  transform: translateY(-4px);
}

.tinker-feature-title {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 400;
  font-size: 1rem !important;
  line-height: 24px;
  letter-spacing: -0.2px;
  margin: 1.4em 0 0.5em 0;
  color: var(--fg);
}

/* Ensure override against global .content h3 italic rule */
.content h3.tinker-feature-title {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 400;
  font-size: 1em;
  line-height: 24px;
  margin: 1.2em 0 0.5em 0 !important; /* override global h3 margins for feature cards */
}

/* Extra specificity: only inside Tinker feature cards */
.tinker-feature-card .tinker-feature-title {
  margin: 0 0 0.15em 0; /* top gap handled by icon margin */
}

/* Increase specificity to beat `.content h3.tinker-feature-title` */
.content .tinker-feature-card .tinker-feature-title {
  margin: 0 0 0.15em 0; /* enforce zero top margin against h3 overrides */
}

.tinker-feature-body {
  font-family: var(--font-sans);
  color: var(--fg3);
  font-size: 0.875rem;
  line-height: 1.4;
  margin: 0;
}

/* ------------------------------------------------------------ */
/* About LoRA section */
/* ------------------------------------------------------------ */

.tinker-lora {
  margin-top: 1.4rem !important;
}

.tinker-lora-card {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  box-sizing: border-box;
  height: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tinker-col-gap);
  align-items: start;
}

.tinker-lora-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Desktop alignment: keep visuals in row 1 and text blocks in row 2 */
@media (min-width: 1025px) {
  .tinker-lora-card {
    column-gap: var(--tinker-col-gap);
    row-gap: 1rem;
  }

  .tinker-lora-column {
    display: contents;
  }

  .tinker-lora-visual {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }

  .tinker-cookbook-visual {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin-bottom: 0;
  }

  .tinker-lora-primary-content {
    grid-column: 1;
    grid-row: 2;
  }

  .tinker-cookbook-content {
    grid-column: 2;
    grid-row: 2;
  }
}

.tinker-lora-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.tinker-lora-heading {
  text-align: left !important;
  font-size: 1.2rem !important;
  line-height: 1.25 !important;
  margin-bottom: 0.6rem !important;
}

.tinker-lora-visual {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin-bottom: 1rem;
}

.tinker-lora-visual img,
.tinker-lora-visual svg {
  width: 100%;
  max-width: 500px;
  height: auto;
  object-fit: contain;
  margin: 0;
}

.tinker-lora-visual .tinker-lora-mini {
  width: 75% !important;
  max-width: 75% !important;
  flex: 0 0 75% !important;
  height: auto !important;
  margin: 0 !important;
}

.tinker-cookbook-visual {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin-bottom: 1rem;
}

.tinker-cookbook-visual img,
.tinker-cookbook-visual svg {
  width: 54px !important;
  height: 54px !important;
  max-width: 54px !important;
  object-fit: contain;
  margin: 0 !important;
}

.tinker-lora-description {
  font-family: var(--font-sans);
  font-size: 1rem !important;
  line-height: 1.6;
  color: var(--fg2);
  margin: 0 0 1rem 0 !important;
  max-width: 85%;
}

.tinker-lora-link {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--fg4);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
  align-self: flex-start;
}

.tinker-lora-link:hover {
  color: var(--fg2);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--fg2) 40%, transparent);
  text-underline-offset: 2px;
}

/* Override .content a styles for LoRA link */
.content .tinker-lora-link {
  color: var(--fg4) !important;
  text-decoration: none !important;
  transition: color 0.2s ease-in-out !important;
}

.content .tinker-lora-link:hover {
  color: var(--fg2) !important;
  text-decoration: underline !important;
  text-decoration-color: color-mix(in srgb, var(--fg2) 40%, transparent) !important;
  text-underline-offset: 2px !important;
}

/* Ensure visuals stay centered when LoRA/Cookbook stacks on smaller viewports */
@media (max-width: 1024px) {
  .tinker-lora-visual,
  .tinker-cookbook-visual {
    justify-content: center !important;
    align-self: center !important;
  }

  .tinker-lora-visual .tinker-lora-mini,
  .tinker-cookbook-visual img,
  .tinker-cookbook-visual svg {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* ------------------------------------------------------------ */
/* FAQ accordion (constrained to main body text width) */
/* ------------------------------------------------------------ */

.tinker-faq {
  margin-top: 0 !important;
  display: block;
  width: 100% !important;
  max-width: 660px !important; /* match non-blog body text width */
  box-sizing: border-box;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Extra specificity guard to beat any full-bleed rules */
.tinker-section .tinker-faq { width: 100% !important; padding-left: 0 !important; padding-right: 0 !important;}

.tinker-faq-item {
  display: block;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  width: 100%;
  inline-size: 100%;
  box-sizing: border-box;
  margin: 0 -0.5rem; /* inset effect like model items */
  padding: 0 0.5rem;
  position: relative;
  transition: background-color 0.2s ease-in-out;
}

/* Kill global .content div bottom margin for FAQ rows */
.content .tinker-faq-item { margin-bottom: 0; }


/* Remove bottom border from last FAQ item */
.tinker-faq-item:last-of-type {
  border-bottom: none;
}

.tinker-faq-question {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  /* Right padding reserves room for the absolutely-positioned +/× icon
     (right:0, 18px) so long questions wrap instead of running under it. */
  padding: 1.25rem 2rem 1.25rem 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--fg);
  user-select: none;
  width: 100%;
  margin: 0;
  transition: opacity 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

/* Plus to X icon on the right */
.tinker-faq-question::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-color: var(--fg5) !important;
  mask-image: url('/tinker/svgs/icons/plus.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms ease;
  will-change: transform;
}

.tinker-faq-toggle:checked + .tinker-faq-question::after {
  transform: translateY(-50%) rotate(45deg);
}

.tinker-faq-question:hover {
  color: var(--fg);
}

.tinker-faq-question:hover::after {
  background-color: var(--fg3) !important;
}

.tinker-faq-question:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.tinker-faq-answer {
  font-family: var(--font-serif);
  color: var(--fg2);
  font-size: 1rem;
  line-height: 1.5;
  padding: 0; /* no padding when collapsed */
  padding-right: 0 !important;
  margin: 0;
  display: grid;                 /* smooth expand/collapse */
  grid-template-rows: 0fr;       /* collapsed state */
  opacity: 0;                    /* faded when collapsed */
  transform: none;
  transform-origin: top;         /* ensure growth proceeds downward */
  overflow-anchor: none;         /* prevent browser scroll anchoring jumps */
  transition:
    grid-template-rows 240ms ease,
    opacity 200ms ease;
  will-change: grid-template-rows, opacity;
  width: 100%;
}

/* Inner wrapper is the grid child that actually overflows; we hide it */
.tinker-faq-answer-inner {
  overflow: hidden;
  min-height: 0; /* allow shrinking */
}

.tinker-faq-toggle:checked ~ .tinker-faq-answer {
  grid-template-rows: 1fr; /* expanded */
  opacity: 1;
  transform: none;
  padding: 0 0 0.9rem 0; /* bottom-only padding so top edge stays anchored */
}

@media (prefers-reduced-motion: reduce) {
  .tinker-faq-answer {
    transition: none;
  }
}

/* ------------------------------------------------------------ */
/* Customer Stories                                              */
/* ------------------------------------------------------------ */

/* Full-bleed layout is shared with .tinker-features/.tinker-models/.tinker-lora
   (see the grouped rule above); only the stacking + spacing is unique here. */
.tinker-customers {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  margin-top: 1.4rem !important;
}

/* Desktop: lay the four use-case sections out two-up in a uniform 2×2 grid,
   each occupying half the container width. minmax(0,1fr) lets the inner card
   grid shrink rather than forcing the column past 50%. */
@media (min-width: 1025px) {
  .tinker-customers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    column-gap: var(--tinker-col-gap);
    row-gap: 3.5rem;
    align-items: start;
  }

  /* Cards get more room to breathe on desktop. */
  .tinker-customer-card {
    padding: 1.5rem; /* 24px v / h */
  }
}

.tinker-customer-group {
  display: grid;
  gap: 2rem;
  margin-bottom: 0 !important;
  @media (min-width: 1025px) {
    grid-template-rows: subgrid;
    grid-row: span 2;
  }
}

.content .tinker-customer-group-title,
.tinker-customer-group-title {
  font-family: var(--font-serif) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 1.3rem !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 !important;
}

/* Title + subtitle stack on the left of the header; nav stays on the right. */
.tinker-customer-group-heading {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.content .tinker-customer-group-subtitle,
.tinker-customer-group-subtitle {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg2);
  margin: 0 !important;
  max-width: 500px;
}
/* Inline recipe links woven into the use-case prose. */
.content .tinker-customer-group-subtitle a {
  color: var(--fg4);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--fg4) 35%, transparent);
  transition: color .2s ease, text-decoration-color .2s ease;
}
.content .tinker-customer-group-subtitle a:hover,
.content .tinker-customer-group-subtitle a:focus-visible {
  color: var(--fg2);
  text-decoration-color: color-mix(in srgb, var(--fg2) 65%, transparent);
}

/* Two cards per track (one per use-case group), laid out side by side at every
   breakpoint. They never wrap or scroll: each card is flex:1 and shrinks to
   share the row, with the logo scaling down inside it (see min-width notes
   below), so a pair always fits its column down to the narrowest phones. */
.tinker-customer-track {
  --card-gap: var(--tinker-col-gap);
  display: flex;
  gap: var(--card-gap);
  align-items: stretch;
  /* The track is a grid item inside .tinker-customer-group; grid items default
     to min-width:auto, which is the cards' combined min-content (~352px). That
     floor kept the two-card row from shrinking, so it overflowed narrow
     viewports (clipped by an ancestor's overflow-x:hidden). min-width:0 lets the
     track shrink to its column; the cards (flex:1, min-width:0) then halve it. */
  min-width: 0;
}

/* Logo tile: fixed 16:9 box with the logo centred on both axes and a small
   "+" affordance pinned to the top-right corner. The whole tile is a button
   that opens the dialog. */
.tinker-customer-card {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  aspect-ratio: 16 / 9;
  background: color-mix(in srgb, var(--fg) 3%, var(--bg));
  border: 0;
  border-radius: 12px;
  padding: 1rem;
  font: inherit;
  flex: 1;
  /* Let the card shrink below its content's min-content width. Without this the
     logo's flex-shrink:0 + 140px width props the card's min-width:auto floor up
     to ~172px, so two cards overflow narrow viewports instead of shrinking. With
     min-width:0 the card halves the track and the logo's max-width:100% clamps. */
  min-width: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 180ms ease;
  will-change: transform; /* promote to its own layer so the hover scale stays crisp */
}

/* Centre the logo within the tile (override its default top/left anchoring). */
.tinker-customer-card .tinker-customer-logo {
  align-self: center;
}

.tinker-customer-card img.tinker-customer-logo--img {
  object-position: center;
}

.tinker-customer-card:hover {
  transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  .tinker-customer-card { transition: none; }
  .tinker-customer-card:hover { transform: none; }
}

/* "+" affordance — a white circle holding the Lucide plus, pinned to the
   top-right corner as an "open the story" cue. */
.tinker-customer-card-icon {
  display: inline-flex;
  position: absolute;
  top: 14px;
  right: 14px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tinker-customer-card-icon-glyph {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--fg2);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tinker-customer-card:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

/* Every customer logo renders as this <img> wordmark; object-fit:contain keeps
   each logo's aspect ratio inside a fixed-height slot, left-anchored. The `img`
   element-qualifier bumps specificity to (0,1,1) so this beats the global
   `.content img { max-width: 100% }` rule in typography.css. */
img.tinker-customer-logo--img {
  flex-shrink: 0;
  background: none;
  padding: 0;
  border-radius: 0;
  min-width: 0;
  width: 140px;
  height: 28px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  display: block;
}

/* ---- Dialog modal ---- */

.tinker-customer-dialog {
  /* Explicit centering — don't rely on UA defaults alone */
  position: fixed;
  inset: 0;
  margin: auto;
  border: none;
  padding: 0;
  background: #fff;
  color: var(--fg);
  width: min(640px, calc(100vw - 2rem));
  height: fit-content;
  max-height: min(92dvh, 940px);
  border-radius: 14px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.35),
              0 8px 24px -8px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition:
    opacity 220ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    overlay 220ms cubic-bezier(0.16, 1, 0.3, 1) allow-discrete,
    display 220ms cubic-bezier(0.16, 1, 0.3, 1) allow-discrete;
}

.tinker-customer-dialog[open] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@starting-style {
  .tinker-customer-dialog[open] {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
}

.tinker-customer-dialog::backdrop {
  background-color: rgba(20, 20, 20, 0);
  transition:
    background-color 220ms ease,
    overlay 220ms ease allow-discrete,
    display 220ms ease allow-discrete;
}

.tinker-customer-dialog[open]::backdrop {
  background-color: rgba(20, 20, 20, 0.55);
}

@starting-style {
  .tinker-customer-dialog[open]::backdrop {
    background-color: rgba(20, 20, 20, 0);
  }
}

/* Reduced motion: drop the slide/scale (keep the opacity fade) and disable the
   keyframe fallback below, so opening the modal doesn't animate position. */
@media (prefers-reduced-motion: reduce) {
  .tinker-customer-dialog,
  .tinker-customer-dialog[open] {
    transform: none;
  }
  @starting-style {
    .tinker-customer-dialog[open] {
      transform: none;
    }
  }
  .tinker-customer-dialog[open] {
    animation: none;
  }
}

/* Fallback keyframe for browsers without @starting-style */
@keyframes tinkerDialogIn {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@supports not (transition-behavior: allow-discrete) {
  .tinker-customer-dialog[open] {
    animation: tinkerDialogIn 220ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}

.tinker-customer-dialog-body {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  overflow-y: auto;
  /* Keep touch-scroll momentum inside the modal instead of chaining to the
     page behind it on iOS. */
  overscroll-behavior: contain;
  padding: 2.25rem 2.4rem 2.25rem 2.4rem;
  gap: 1.5rem;
}

/* The body is the initial focus target (tabindex=-1 + autofocus) purely to keep
   the ring off the close button on click-open; it's not an interactive control,
   so it shows no focus ring of its own. */
.tinker-customer-dialog-body:focus {
  outline: none;
}

/* Scroll affordance gradients — fade the top/bottom edges of the scroll area to
   hint at more content. JS (in the dialogs shortcode) toggles .is-scrolled /
   .has-overflow-below on the dialog; pseudo-elements sit above the body content
   (z-index:1) but below the close button (z-index:2), clipped by the dialog's
   overflow:hidden + border-radius. */
.tinker-customer-dialog::before,
.tinker-customer-dialog::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2.5rem;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 200ms ease;
}
.tinker-customer-dialog::before {
  top: 0;
  background: linear-gradient(to bottom, #fff, transparent);
}
.tinker-customer-dialog::after {
  bottom: 0;
  background: linear-gradient(to top, #fff, transparent);
}
.tinker-customer-dialog.is-scrolled::before { opacity: 1; }
.tinker-customer-dialog.has-overflow-below::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .tinker-customer-dialog::before,
  .tinker-customer-dialog::after { transition: none; }
}

/* Logo at the top of the dialog — slightly larger than the card slot
   so it reads as a header element. */
.tinker-customer-dialog-logo {
  align-self: flex-start;
  margin-right: 2rem; /* leave room for the close button */
}

img.tinker-customer-logo--img.tinker-customer-dialog-logo {
  width: 200px;
  height: 36px;
}

.tinker-customer-dialog-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--fg3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 160ms ease, color 160ms ease;
  z-index: 2;
}

/* SVG "×" (replaces the text glyph, which never sat optically centered in the
   circle). inline-flex centering on the button + a square SVG = true center. */
.tinker-customer-dialog-close-glyph {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tinker-customer-dialog-close:hover {
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  color: var(--fg);
}

/* Once the body is scrolled, the close button overlaps text — give it a light
   solid backdrop so it stays legible and reads as intentional. */
.tinker-customer-dialog.is-scrolled .tinker-customer-dialog-close {
  background: color-mix(in srgb, var(--fg) 8%, #fff);
}
.tinker-customer-dialog.is-scrolled .tinker-customer-dialog-close:hover {
  background: color-mix(in srgb, var(--fg) 14%, #fff);
}

.tinker-customer-dialog-close:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

/* Lede — the headline statement of the story. Serif, expressive. */
.tinker-customer-dialog-lede {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  /* Matches the customer-group subheads (.tinker-customer-group-title). */
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 !important;
}

/* Body copy — the longer story blurb, between lede and quote. Sans, muted,
   sits below the expressive serif lede. */
/* .content prefix beats typography.css's `.content div { margin-bottom }`
   (0,1,1), which would otherwise add 1.333rem below the body block and make
   the body-to-quote gap larger than the lede-to-body gap. */
.content .tinker-customer-dialog-copy,
.tinker-customer-dialog-copy {
  color: var(--fg2);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

.tinker-customer-dialog-copy > :first-child { margin-top: 0; }
.tinker-customer-dialog-copy > :last-child { margin-bottom: 0; }

.tinker-customer-dialog-copy p {
  margin: 0 0 0.9rem;
}

/* Quote in the modal — serif italic, no border, no padding, flush with the
   container. Specificity bumped with .content because typography.css's
   global blockquote selector is (0,1,1) and was winning. Quote marks
   wrap only the quote text span, so the citation sits cleanly outside
   the closing quote mark. */
.content .tinker-customer-dialog-quote,
.tinker-customer-dialog-quote {
  font-family: var(--font-serif);
  /* !important beats typography.css's .content blockquote:not(.epigraph)...
     rule (0,3,1), which sets font-style: normal. */
  font-style: italic !important;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--fg);
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  /* Hang the opening quote mark into the left margin. */
  hanging-punctuation: first;
}

/* Fallback where hanging-punctuation is unsupported: pull the first line
   (leading quote mark) out with a negative indent, and keep the citation
   block flush. */
@supports not (hanging-punctuation: first) {
  .content .tinker-customer-dialog-quote,
  .tinker-customer-dialog-quote {
    text-indent: -0.42em;
  }
  .content .tinker-customer-dialog-quote cite,
  .tinker-customer-dialog-quote cite {
    text-indent: 0;
  }
}

.tinker-customer-dialog-quote-text {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

.tinker-customer-dialog-quote-text::before { content: open-quote; }
.tinker-customer-dialog-quote-text::after { content: close-quote; }

.content .tinker-customer-dialog-quote cite,
.tinker-customer-dialog-quote cite {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 1rem;
  color: var(--fg2);
}

/* Footer = a row of buttons. Visual treatment comes from the .btn classes in
   ui.css (the CTA uses .btn.primary.lg, matching the hero); only layout here. */
.tinker-customer-dialog-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}


/* Responsive */
@media (min-width: 641px) and (max-width: 1024px) {
  .tinker-customers {
    padding-left: var(--tinker-padding-mid);
    padding-right: var(--tinker-padding-mid);
  }
}

@media (max-width: 640px) {
  .tinker-customers {
    /* Match the 1.6rem horizontal padding used by .tinker-section on mobile
       so the customer-stories margins line up with other sections. */
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    gap: 2.75rem;
  }
  /* Tighter gutter between cards on small screens. */
  .tinker-customer-track {
    gap: 0.5rem; /* 8px */
  }
  /* Cards are small on mobile. Every logo fills the full slot width, so the
     only room for a bigger logo comes from a smaller corner "+": shrink it and
     pull it tight into the corner (it's decorative — the whole card is the tap
     target), which frees the logo cap up to ~76% while keeping a small margin. */
  .tinker-customer-card-icon {
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
  }
  .tinker-customer-card-icon-glyph {
    width: 14px;
    height: 14px;
  }
  .tinker-customer-card img.tinker-customer-logo--img {
    max-width: 76%;
  }
  .tinker-customer-dialog {
    width: calc(100vw - 1rem);
    max-height: calc(100dvh - 2rem);
    border-radius: 12px;
  }
  .tinker-customer-dialog-body {
    padding: 1.5rem 1.4rem 1.6rem 1.4rem;
    gap: 1.2rem;
  }
}