/* My Label Crop — shared editorial styling for every route. */
@font-face {
  font-family: "Open Runde";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/open-runde@5.3.0/latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Open Runde";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/open-runde@5.3.0/latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Open Runde";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/open-runde@5.3.0/latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Open Runde";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/open-runde@5.3.0/latin-700-normal.woff2") format("woff2");
}
:root {
  color-scheme: light;
  --ink: #171d19;
  --ink-soft: #3e4941;
  --paper: #f5f5ef;
  --paper-light: #fffefa;
  --paper-dark: #eceee6;
  --line: #d8dbd1;
  --line-dark: #a4ab9e;
  --signal: #6055F5;
  --signal-dark: #4940D0;
  --signal-soft: #efedff;
  --safety: #efedff;
  --forest: #6055F5;
}

html { scroll-behavior: smooth; }
body {
  background: var(--paper) !important;
  color: var(--ink);
  font-family: "Open Runde", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
::selection { background: var(--safety); color: var(--ink); }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }

/* Navigation: dark ink strip, compact type, bright dispatch marker. */
body > header {
  background: var(--ink) !important;
  border: 0 !important;
  border-bottom: 4px solid var(--signal) !important;
  box-shadow: none !important;
}
body > header > div:first-child { max-width: 1400px; min-height: 74px; }
body > header img { max-height: 40px; }
body > header nav { gap: 2px !important; }
body > header nav a {
  color: #e2e0d9 !important;
  padding: 12px 11px !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .015em;
  transition: color .16s ease, border-color .16s ease;
}
body > header nav a:hover, body > header nav a.nav-active {
  color: white !important;
  background: transparent !important;
  border-bottom-color: var(--safety);
}
body > header #menuBtn { color: var(--ink) !important; }
body > header #mobileMenu { background: var(--ink) !important; border-color: #374148 !important; }
body > header #mobileMenu a { color: #e2e0d9 !important; font-weight: 500 !important; }
body > header #mobileMenu a:hover { color: var(--safety) !important; }
body > header #mobileMenu .border-t { border-color: #374148 !important; }
body > header a[href="https://okaygst.com/"] {
  background: var(--signal) !important; color: #fff !important;
  border-radius: 2px !important; box-shadow: none !important;
  padding: 12px 16px !important; font-size: 12px !important;
}
body > header a[href="https://okaygst.com/"] span {
  background: var(--safety) !important; color: var(--ink) !important;
  border-radius: 0 !important;
}

/* Flat, tactile surfaces and a disciplined type scale. */
body > main { min-height: 55vh; }
body > main > section, body > section { scroll-margin-top: 84px; }
h1, h2, h3 { color: var(--ink); }
h1 {
  font-family: "Open Runde", Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.055em !important;
  line-height: .98 !important;
}
h2 {
  font-family: "Open Runde", Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.045em !important;
  line-height: 1.04;
}
h3 { font-family: "Open Runde", Arial, sans-serif !important; font-weight: 600 !important; letter-spacing: -.025em; }
p, li { text-wrap: pretty; }
body > footer {
  background: var(--ink) !important;
  color: #d6d7d1 !important;
  border-top: 4px solid var(--signal);
}
body > footer a:hover { color: var(--safety) !important; }
body > footer img { max-height: 54px; }

/* Ink panels are reserved for large entry points and calls to action. */
.hero-gradient { background: var(--ink) !important; box-shadow: none !important; }
.hero-gradient h1, .hero-gradient h2, .hero-gradient h3 { color: #fff !important; }
.hero-gradient p { color: #c5c9c7 !important; }
.hero-gradient a[class*="bg-[#6055F5]"], .hero-gradient a[class*="bg-blue"] {
  background: var(--signal) !important; color: white !important;
  border-radius: 2px !important; box-shadow: none !important;
}
.hero-gradient a[class*="bg-[#6055F5]"]:hover, .hero-gradient a[class*="bg-blue"]:hover { background: var(--signal-dark) !important; }
.hero-gradient > .absolute { display: none !important; }
body > main section [class*="bg-gradient-to-br"] { background: var(--ink) !important; }
body > main section [class*="bg-gradient-to-br"] > .absolute { display: none !important; }
body > section.hero-gradient, body > main > section:first-child.hero-gradient {
  border-radius: 4px !important;
  border: 0 !important;
}
body > section.hero-gradient h1, body > main > section:first-child.hero-gradient h1 {
  font-size: clamp(40px, 5.4vw, 76px) !important;
}

/* Home: big paper headline opposite a simple, framed working photo. */
body.home-page > header + section.hero-gradient {
  position: relative;
  overflow: hidden;
  background-color: var(--paper) !important;
  background-image: linear-gradient(90deg, rgba(18,26,32,.035) 1px, transparent 1px), linear-gradient(rgba(18,26,32,.035) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
  border: 1px solid var(--line) !important;
  border-top: 8px solid var(--signal) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
body.home-page > header + section.hero-gradient > div:first-child { display: none; }
body.home-page > header + section.hero-gradient h1 {
  max-width: 720px;
  color: var(--ink) !important;
  font-size: clamp(46px, 6.2vw, 88px) !important;
  line-height: .91 !important;
  letter-spacing: -.065em !important;
}
body.home-page > header + section.hero-gradient h1 br { display: none; }
body.home-page > header + section.hero-gradient p { color: #45525a !important; font-size: 17px !important; }
body.home-page > header + section.hero-gradient .mb-6 span {
  color: var(--ink) !important; background: var(--safety) !important;
  border: 0 !important; border-radius: 0 !important;
  font-size: 11px !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: .07em !important;
}
body.home-page > header + section.hero-gradient a[href="/tools/"] {
  background: var(--signal) !important; color: #fff !important; border-radius: 2px !important;
  box-shadow: none !important; text-transform: uppercase; letter-spacing: .045em;
}
body.home-page > header + section.hero-gradient a[href="/blog/"] {
  background: var(--paper-light) !important; color: var(--ink) !important;
  border: 1px solid var(--ink) !important; border-radius: 2px !important;
  text-transform: uppercase; letter-spacing: .045em;
}
body.home-page > header + section.hero-gradient .max-w-\[500px\] {
  background: var(--paper-light) !important; padding: 10px !important;
  border: 1px solid var(--ink) !important; border-radius: 2px !important;
  box-shadow: none !important; backdrop-filter: none !important;
}
body.home-page > header + section.hero-gradient .max-w-\[500px\] > img { border-radius: 0 !important; }
body.home-page > header + section.hero-gradient .mt-8.flex.flex-wrap.gap-5 { color: #48545b !important; }
body.home-page > header + section.hero-gradient .mt-8.flex.flex-wrap.gap-5 i { color: var(--forest) !important; }
body.home-page > header + section.hero-gradient .absolute.rounded-full { border: 3px solid var(--paper); }

/* Homepage callout panels and platform page hero panels. */
body > section:last-of-type .hero-gradient {
  background: var(--safety) !important; color: var(--ink) !important;
  border: 0 !important; border-radius: 2px !important; box-shadow: none !important;
}
body > section:last-of-type .hero-gradient h2 { color: var(--ink) !important; }
body > section:last-of-type .hero-gradient p { color: #39434a !important; }
body > section:last-of-type .hero-gradient a { background: var(--ink) !important; color: white !important; border-radius: 2px !important; }
body > section.hero-gradient:not(:first-of-type) { border-radius: 2px !important; }

/* Cards become paper panels with rules, not floating rounded tiles. */
*:not(#cropBox) { box-shadow: none !important; text-shadow: none !important; }
.card-hover { transition: border-color .18s ease, background-color .18s ease; }
.card-hover:hover { transform: none !important; border-color: var(--signal) !important; background-color: var(--paper-light); }
main .bg-white.rounded-2xl, main .rounded-2xl.bg-white,
main .bg-white.rounded-xl, main .rounded-xl.bg-white,
body > section .bg-white.rounded-2xl, body > section .rounded-2xl.bg-white {
  background: var(--paper-light) !important;
  border: 1px solid var(--line) !important;
  border-radius: 2px !important;
}
main a[class*="bg-[#6055F5]"], main button[class*="bg-[#6055F5]"] {
  background: var(--signal) !important; color: #fff !important; border-radius: 2px !important;
}
main a[class*="bg-[#6055F5]"]:hover, main button[class*="bg-[#6055F5]"]:hover { background: var(--signal-dark) !important; }
main a[class*="text-[#6055F5]"], main button[class*="text-[#6055F5]"] { color: var(--signal-dark) !important; }
main [class*="bg-[#6055F5]/10"], main [class*="bg-[#efedff]"] {
  background: #e7efec !important; color: #2d5752 !important; border-radius: 0 !important;
}
main input:not([type="file"]), main select, main textarea {
  border-color: var(--line-dark); border-radius: 2px; color: var(--ink); background: var(--paper-light);
}
main input:focus, main select:focus, main textarea:focus { outline: 2px solid var(--signal); border-color: var(--signal); }

/* Blog home: ink masthead, index-card search and ruled article list. */
body > main > section:first-child.hero-gradient {
  background: var(--signal) !important; margin: 18px auto 0 !important;
  width: calc(100% - 48px); max-width: 1400px; padding-top: 76px !important; padding-bottom: 76px !important;
}
body > main > section:first-child.hero-gradient h1 { font-size: clamp(48px, 7vw, 92px) !important; }
body > main > section:first-child.hero-gradient p { max-width: 760px; margin-inline: auto; }
body > main > section:first-child.hero-gradient span { background: var(--safety) !important; color: var(--ink) !important; border-radius: 0 !important; }
body > main > section input#blogSearch { border: 1px solid var(--ink); border-radius: 2px !important; background: var(--paper-light); box-shadow: none !important; }
body > main #blogGrid > article {
  border: 0 !important; border-top: 3px solid var(--ink) !important;
  border-radius: 0 !important; background: var(--paper-light) !important;
}
body > main #blogGrid > article:hover { border-top-color: var(--signal) !important; }
body > main #blogGrid > article h3 a { text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* Reading pages use a magazine-style title rule and comfortable measure. */
body > main > article { max-width: 900px; padding-top: 62px !important; padding-bottom: 90px !important; }
body > main > article > header {
  margin-bottom: 44px !important; padding: 30px 0 28px !important;
  border: 0 !important; border-top: 5px solid var(--signal) !important;
  border-bottom: 1px solid var(--ink) !important; border-radius: 0 !important;
  background: transparent !important;
}
body > main > article > header h1 { font-size: clamp(42px, 6vw, 72px) !important; }
body > main > article > header a { color: var(--signal-dark) !important; }
body > main > article > header span { background: var(--safety) !important; color: var(--ink) !important; border-radius: 0 !important; }
body > main > article .prose-like-content { max-width: 720px; margin: 0 auto; color: #39474f; font-size: 17px; line-height: 1.8; }
body > main > article .prose-like-content p { color: #39474f !important; margin-top: 1.35em; }
body > main > article .prose-like-content h2 { margin-top: 2.2em; font-size: clamp(29px, 4vw, 42px) !important; }
body > main > article .prose-like-content th { background: var(--paper-dark) !important; color: var(--ink) !important; }
body > main > article .prose-like-content td { border-color: var(--line) !important; }
body > main > article .hero-gradient { border-radius: 2px !important; }

/* Marketplace landing pages and the tools index. */
body > main > section:first-child:not(.hero-gradient) > div[class*="bg-[#001f3f"]] {
  background: var(--ink) !important; border-radius: 2px !important;
  border-left: 8px solid var(--signal);
}
body > main > section:first-child:not(.hero-gradient) > div[class*="bg-[#001f3f]"] h1 { color: white !important; }
body > section.hero-gradient h1 { max-width: 900px; }
body > section.hero-gradient a[href*="/crop/"] { border-radius: 2px !important; }
body > main > section:not(.hero-gradient) { background-color: transparent; }

/* Workbench: bright paper canvas, teal handles, compact controls. */
body > main.max-w-7xl { max-width: 1440px; padding-top: 26px !important; }
body > main.max-w-7xl > section:first-child {
  margin-bottom: 22px !important; padding: 22px 24px;
  border: 1px solid var(--line); border-left: 6px solid var(--signal);
  border-radius: 2px; background: var(--paper-dark) !important;
}
body > main.max-w-7xl > section:first-child h1 { font-size: clamp(30px, 4vw, 46px) !important; }
body > main.max-w-7xl #uploadArea { background: #fffefa !important; border-color: #9e9b92 !important; border-radius: 2px !important; }
body > main.max-w-7xl #uploadArea > div { border-radius: 2px !important; color: var(--signal) !important; }
body > main.max-w-7xl #cropBox { border-color: var(--signal) !important; }
body > main.max-w-7xl #previewWrapper { position: relative; }
body > main.max-w-7xl #pdfCanvas { display: block; }
body > main.max-w-7xl #cropBox {
  position: absolute !important;
  z-index: 5;
  box-sizing: border-box;
  cursor: move;
  touch-action: none;
}
body > main.max-w-7xl #cropBox .resize-handle {
  position: absolute;
  z-index: 6;
  display: block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--signal);
  border-radius: 50%;
  background: var(--paper-light);
  touch-action: none;
}
body > main.max-w-7xl #cropBox .resize-handle.tl { top: -7px; left: -7px; cursor: nwse-resize; }
body > main.max-w-7xl #cropBox .resize-handle.tm { top: -7px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
body > main.max-w-7xl #cropBox .resize-handle.tr { top: -7px; right: -7px; cursor: nesw-resize; }
body > main.max-w-7xl #cropBox .resize-handle.ml { top: 50%; left: -7px; transform: translateY(-50%); cursor: ew-resize; }
body > main.max-w-7xl #cropBox .resize-handle.mr { top: 50%; right: -7px; transform: translateY(-50%); cursor: ew-resize; }
body > main.max-w-7xl #cropBox .resize-handle.bl { bottom: -7px; left: -7px; cursor: nesw-resize; }
body > main.max-w-7xl #cropBox .resize-handle.bm { bottom: -7px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
body > main.max-w-7xl #cropBox .resize-handle.br { bottom: -7px; right: -7px; cursor: nwse-resize; }
body > main.max-w-7xl aside {
  border: 1px solid var(--line) !important; border-top: 4px solid var(--ink) !important;
  border-radius: 2px !important; background: var(--paper-light);
}
body > main.max-w-7xl .mode-toggle { border-radius: 2px !important; background: var(--paper-dark) !important; }
body > main.max-w-7xl .mode-pill { border-radius: 2px !important; }
body > main.max-w-7xl .mode-pill.active { background: var(--signal) !important; color: white !important; }
body > main.max-w-7xl [id="thermalSettings"], body > main.max-w-7xl [id="a4Settings"] {
  background: var(--paper-dark) !important; border-color: var(--line) !important; border-radius: 2px !important;
}
body > main.max-w-7xl #previewWrapper { border-radius: 2px !important; }

/* Company and policy pages: readable measure without a second card system. */
body > main > section.max-w-3xl, body > main > section.max-w-4xl { max-width: 780px; line-height: 1.8; }
body > main > section.max-w-3xl h2, body > main > section.max-w-4xl h2 { margin-top: 2em; }
body > main > section:first-child:not(.hero-gradient) h1 { font-size: clamp(42px, 6vw, 78px) !important; }

/* Four-step guide: compact workflow rows with the screenshots doing the talking. */
#tutorial {
  background: var(--paper-dark) !important;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
#tutorial > div { max-width: 1240px !important; text-align: left !important; }
#tutorial > div > span {
  color: var(--signal-dark) !important; font-size: 12px !important;
  font-weight: 700 !important; letter-spacing: .12em !important;
}
#tutorial h2 {
  max-width: 900px; margin: 12px 0 0 !important;
  font-size: clamp(40px, 5.6vw, 72px) !important;
  line-height: .98 !important;
}
#tutorial h2 br { display: none; }
#tutorial .grid { margin-top: 42px !important; gap: 16px !important; }
#tutorial .grid > .group {
  display: grid !important;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  grid-template-rows: auto auto 1fr;
  align-items: start !important;
  justify-items: start !important;
  gap: 9px 22px;
  padding: 22px !important;
  background: var(--paper-light) !important;
  border: 1px solid var(--line) !important;
  border-top: 4px solid var(--ink) !important;
  border-radius: 2px !important;
}
#tutorial .grid > .group:hover { border-top-color: var(--signal) !important; }
#tutorial .group > div:first-child {
  grid-column: 1; grid-row: 1;
  width: 42px !important; height: 42px !important;
  margin: 0 0 7px !important;
  border-radius: 0 !important;
  background: var(--signal) !important; color: #fff !important;
  font-size: 16px !important; font-weight: 700 !important;
}
#tutorial .group h3 {
  grid-column: 1; grid-row: 2;
  align-self: start; margin: 0 !important;
  font-size: 21px !important; line-height: 1.14 !important;
}
#tutorial .group p {
  grid-column: 1; grid-row: 3;
  max-width: none !important; margin: 4px 0 0 !important;
  color: #4b555a !important; font-size: 14px !important; line-height: 1.55 !important;
}
#tutorial .group img {
  grid-column: 2; grid-row: 1 / 4;
  width: 100% !important; max-width: none !important;
  height: 100% !important; min-height: 205px;
  max-height: 250px; margin: 0 !important;
  align-self: stretch; object-fit: cover; object-position: top;
  border: 1px solid var(--line) !important; border-radius: 0 !important;
}

@media (max-width: 1023px) {
  body > header > div:first-child { min-height: 66px; }
  body > header #mobileMenu { box-shadow: none !important; }
  body > main > section:first-child.hero-gradient { width: calc(100% - 28px); }
}
@media (max-width: 900px) {
  #tutorial .grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 640px) {
  body > header > div:first-child { min-height: 60px; padding-inline: 16px !important; }
  body > header img { max-width: 174px; }
  body > header nav a { border-bottom: 0; }
  body.home-page > header + section.hero-gradient { margin: 10px !important; border-top-width: 6px !important; }
  body.home-page > header + section.hero-gradient > div.relative { padding: 46px 18px 52px !important; }
  body.home-page > header + section.hero-gradient h1 { font-size: clamp(42px, 12vw, 60px) !important; }
  body.home-page > header + section.hero-gradient .max-w-\[500px\] { margin: 8px 8px 0 !important; }
  body > main > section:first-child.hero-gradient { width: calc(100% - 20px); padding: 54px 20px !important; }
  body > main > article { padding: 42px 18px 64px !important; }
  body > main > article > header { padding: 24px 0 !important; }
  body > main > article > header h1 { font-size: 42px !important; }
  body > main > article .prose-like-content { font-size: 16px; line-height: 1.75; }
  body > main.max-w-7xl { padding-inline: 14px !important; }
  body > main.max-w-7xl > section:first-child { padding: 16px; }
  #tutorial { padding: 64px 18px !important; }
  #tutorial h2 { font-size: clamp(38px, 11vw, 54px) !important; }
  #tutorial .grid { margin-top: 28px !important; }
  #tutorial .grid > .group {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    gap: 8px; padding: 18px !important;
  }
  #tutorial .group > div:first-child { grid-column: 1; grid-row: 1; }
  #tutorial .group h3 { grid-column: 1; grid-row: 2; }
  #tutorial .group p { grid-column: 1; grid-row: 3; }
  #tutorial .group img {
    grid-column: 1; grid-row: 4; min-height: 0; max-height: none;
    aspect-ratio: 1.42; margin-top: 10px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Final consistency pass across all route families. */
body > main > section:not(.hero-gradient):not(#tutorial),
body > section:not(.hero-gradient):not(#tutorial) {
  background: transparent !important;
}
body > main > section:first-child.hero-gradient {
  background: var(--ink) !important;
  border: 0 !important;
  border-bottom: 6px solid var(--signal) !important;
  border-radius: 2px !important;
  padding-top: clamp(48px, 7vw, 88px) !important;
  padding-bottom: clamp(48px, 7vw, 88px) !important;
}
body > main > section:first-child.hero-gradient h1 {
  color: #fff !important;
  font-family: "Open Runde", Arial, sans-serif !important;
  font-size: clamp(42px, 6vw, 76px) !important;
  line-height: .98 !important;
}
body > main > section:first-child.hero-gradient p { color: #d1d5d3 !important; }
body > main > section:first-child.hero-gradient > .absolute { display: none !important; }
body > main > section:first-child.hero-gradient span {
  background: var(--safety) !important; color: var(--ink) !important;
  border-radius: 0 !important;
}
body > section.hero-gradient:not(.home-hero) {
  background: var(--ink) !important;
  border-bottom: 6px solid var(--signal) !important;
  border-radius: 2px !important;
}
body > section.hero-gradient:not(.home-hero) h1 { color: #fff !important; }
body > section.hero-gradient:not(.home-hero) > .absolute { display: none !important; }
body > main > section:not(.hero-gradient) > div[class*="bg-[#001f3f]"] {
  border-left-color: var(--signal) !important;
  border-radius: 2px !important;
}
body > main > section:not(.hero-gradient) > div[class*="bg-[#001f3f]"] h1 { color: #fff !important; }

/* Same content width and vertical rhythm for the two browser-side workbenches. */
body > main.max-w-6xl, body > main.max-w-7xl {
  max-width: 1440px !important;
  padding: 36px clamp(16px, 3vw, 40px) 80px !important;
}
body > main.max-w-6xl > section:first-child,
body > main.max-w-7xl > section:first-child {
  margin-bottom: 24px !important;
  padding: 22px 24px;
  border: 1px solid var(--line) !important;
  border-left: 6px solid var(--signal) !important;
  border-radius: 2px !important;
  background: var(--paper-dark) !important;
}
body > main.max-w-6xl > section:nth-child(2) > div,
body > main.max-w-6xl > section:nth-child(2) > aside {
  border: 1px solid var(--line) !important;
  border-radius: 2px !important;
  background: var(--paper-light) !important;
}
body > main.max-w-6xl #uploadArea,
body > main.max-w-7xl #uploadArea {
  background: #fffefa !important;
  border: 2px dashed var(--line-dark) !important;
  border-radius: 2px !important;
}
body > main.max-w-6xl #uploadArea > .absolute { display: none !important; }
body > main.max-w-6xl #fileList > li { border-color: var(--line) !important; }
body > main.max-w-6xl #mergeBtn,
body > main.max-w-6xl #chooseFilesBtn { background: var(--signal) !important; border-radius: 2px !important; }

/* Keep content pages and tool screens legible on the shared paper canvas. */
body > main > article,
body > main > section.max-w-3xl,
body > main > section.max-w-4xl {
  color: var(--ink);
}
body > main > article > header span,
body > main > section [class*="rounded-full"][class*="bg-[#6055F5]/10"] {
  border-radius: 0 !important;
}
body > main > section.bg-white { background: transparent !important; }
body > main #blogGrid > article {
  min-height: 300px;
  border-bottom: 1px solid var(--line) !important;
}

/* A quieter editorial system: open space, strong type, and useful green accents. */
body { background: var(--paper) !important; color: var(--ink) !important; }
body > header {
  background: rgba(255,254,250,.96) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter: none !important;
}
body > header > div:first-child {
  max-width: 1320px !important;
  min-height: 76px !important;
  padding-inline: clamp(18px, 4vw, 48px) !important;
}
body > header img { max-height: 38px !important; }
body > header nav { gap: clamp(4px, 1.4vw, 20px) !important; }
body > header nav a {
  color: #455148 !important;
  border: 0 !important;
  padding: 10px 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
body > header nav a:hover, body > header nav a.nav-active {
  color: var(--signal-dark) !important;
  background: transparent !important;
}
body > header a[href="https://okaygst.com/"] {
  background: var(--ink) !important;
  color: #fffefa !important;
  border-radius: 3px !important;
  padding: 12px 15px !important;
  font-size: 12px !important;
}
body > header a[href="https://okaygst.com/"] span { display: none !important; }
body > header #mobileMenu {
  background: var(--paper-light) !important;
  border-color: var(--line) !important;
}
body > header #mobileMenu a { color: var(--ink) !important; }
body > header #mobileMenu .border-t { border-color: var(--line) !important; }

body > footer {
  background: #171d19 !important;
  border-top: 1px solid #364039 !important;
  color: #e4e7df !important;
}
body > footer a { text-decoration-color: transparent; text-underline-offset: 4px; }
body > footer a:hover { color: #dce8d7 !important; text-decoration-color: currentColor; }

/* Homepage hero: an open editorial masthead, with the working photo as the proof. */
body.home-page > header + section.home-hero {
  width: min(calc(100% - 48px), 1320px) !important;
  margin: 0 auto !important;
  overflow: visible !important;
  background: var(--paper) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}
body.home-page > header + section.home-hero > .absolute { display: none !important; }
body.home-page > header + section.home-hero > div.relative {
  max-width: none !important;
  padding: clamp(70px, 10vw, 132px) clamp(4px, 3vw, 36px) clamp(72px, 9vw, 112px) !important;
}
body.home-page > header + section.home-hero > div.relative > .grid {
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr) !important;
  gap: clamp(42px, 7vw, 100px) !important;
}
body.home-page > header + section.home-hero h1 {
  max-width: 700px !important;
  color: var(--ink) !important;
  font-size: clamp(52px, 6.5vw, 88px) !important;
  line-height: .94 !important;
  letter-spacing: -.075em !important;
}
body.home-page > header + section.home-hero p {
  max-width: 490px !important;
  color: #596259 !important;
  font-size: 16px !important;
  line-height: 1.72 !important;
}
body.home-page > header + section.home-hero .mb-6 span {
  background: var(--safety) !important;
  color: var(--signal-dark) !important;
  border: 0 !important;
  border-radius: 2px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .09em !important;
}
body.home-page > header + section.home-hero a[href="/tools/"] {
  background: var(--signal) !important;
  color: white !important;
  border: 1px solid var(--signal) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  padding: 14px 19px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body.home-page > header + section.home-hero a[href="/blog/"] {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-dark) !important;
  border-radius: 3px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body.home-page > header + section.home-hero .max-w-\[500px\] {
  max-width: 560px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 1px solid var(--line) !important;
  border-radius: 2px !important;
  transform: rotate(1deg);
}
body.home-page > header + section.home-hero .max-w-\[500px\] > img { border-radius: 0 !important; }
body.home-page > header + section.home-hero .mt-8.flex.flex-wrap.gap-5 {
  color: #58645b !important;
  gap: 18px !important;
  font-size: 11px !important;
}
body.home-page > header + section.home-hero .mt-8.flex.flex-wrap.gap-5 i { color: var(--signal) !important; }
body.home-page > header + section.home-hero .absolute.rounded-full { display: none !important; }

/* Give each homepage block its own job instead of repeating the same card grid. */
body.home-page > .home-features,
body.home-page > .home-proof,
body.home-page > .home-tools,
body.home-page > .home-faq { padding-block: clamp(72px, 9vw, 116px) !important; }
body.home-page > .home-features > div,
body.home-page > .home-proof > div,
body.home-page > .home-tools > div { max-width: 1240px !important; }
body.home-page .home-features > div > div:first-child,
body.home-page .home-tools > div > div:first-child {
  max-width: 680px !important;
  margin: 0 0 40px !important;
  text-align: left !important;
}
body.home-page .home-features > div > div:first-child span,
body.home-page .home-tools > div > div:first-child span,
body.home-page .home-faq > div > div:first-child span {
  color: var(--signal-dark) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
}
body.home-page .home-features h2,
body.home-page .home-tools h2,
body.home-page .home-faq h2 {
  font-size: clamp(38px, 5vw, 64px) !important;
  line-height: .98 !important;
}
body.home-page .home-features .grid { gap: 0 !important; }
body.home-page .home-features .grid > div {
  padding: 28px 28px 26px !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--line-dark) !important;
  border-radius: 0 !important;
}
body.home-page .home-features .grid > div + div { border-left: 1px solid var(--line) !important; }
body.home-page .home-features .grid > div > div:first-child {
  width: 30px !important;
  height: 30px !important;
  margin-bottom: 26px !important;
  background: transparent !important;
  color: var(--signal) !important;
  border-radius: 0 !important;
}
body.home-page .home-features h3 { font-size: 22px !important; }
body.home-page .home-features p { color: #5e675e !important; font-size: 14px !important; line-height: 1.7 !important; }

#tutorial {
  padding: clamp(72px, 9vw, 112px) clamp(18px, 5vw, 64px) !important;
  background: var(--paper-dark) !important;
  border: 0 !important;
}
#tutorial > div { max-width: 1240px !important; }
#tutorial > div > span { color: var(--signal-dark) !important; letter-spacing: .12em !important; }
#tutorial h2 { font-size: clamp(40px, 5.8vw, 72px) !important; }
#tutorial .grid { gap: 14px !important; }
#tutorial .grid > .group {
  background: var(--paper-light) !important;
  border: 1px solid var(--line) !important;
  border-top: 2px solid var(--ink) !important;
  border-radius: 2px !important;
  padding: clamp(17px, 2vw, 26px) !important;
}
#tutorial .grid > .group:hover { border-top-color: var(--signal) !important; }
#tutorial .group > div:first-child { background: var(--signal) !important; }
#tutorial .group img { border-radius: 1px !important; }

body.home-page .home-proof { background: var(--paper-light) !important; border-block: 1px solid var(--line) !important; }
body.home-page .home-proof > div > h2 { text-align: left !important; font-size: clamp(34px, 4.4vw, 56px) !important; }
body.home-page .home-proof .grid { gap: 0 !important; border-block: 1px solid var(--line) !important; }
body.home-page .home-proof .grid > div {
  padding: 32px 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: left !important;
}
body.home-page .home-proof .grid > div + div { border-left: 1px solid var(--line) !important; }
body.home-page .home-proof .grid > div > div:first-child { display: none !important; }
body.home-page .home-proof .grid > div > div:nth-child(2) {
  color: var(--ink) !important;
  font-size: clamp(48px, 6vw, 76px) !important;
  line-height: .95 !important;
  letter-spacing: -.07em !important;
}
body.home-page .home-proof .grid p { color: #657065 !important; font-size: 12px !important; }

body.home-page > .home-workflow {
  margin: 0 auto !important;
  width: min(calc(100% - 48px), 1320px) !important;
  padding: clamp(64px, 8vw, 96px) clamp(22px, 5vw, 64px) !important;
  background: var(--ink) !important;
  border: 0 !important;
  border-radius: 3px !important;
}
body.home-page .home-workflow h2,
body.home-page .home-workflow h3 { color: var(--paper-light) !important; }
body.home-page .home-workflow p { color: #c0c9be !important; }
body.home-page .home-workflow span { color: #c8d9bf !important; }
body.home-page .home-workflow .grid { gap: 0 !important; }
body.home-page .home-workflow .glass-card {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid #667264 !important;
  border-radius: 0 !important;
  padding: 26px 24px !important;
}
body.home-page .home-workflow .glass-card + .glass-card { border-left: 1px solid #3c473d !important; }
body.home-page .home-workflow .glass-card > div:first-child {
  width: auto !important;
  height: auto !important;
  margin: 0 auto 26px !important;
  background: transparent !important;
  color: #c8d9bf !important;
  border: 0 !important;
  font-size: 42px !important;
  line-height: 1 !important;
}

body.home-page .home-tools { background: var(--paper) !important; }
body.home-page .home-tools .grid { gap: 0 !important; border-top: 1px solid var(--line-dark) !important; }
body.home-page .home-tools .grid > div {
  padding: 24px 22px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
body.home-page .home-tools .grid > div:hover { background: var(--paper-light) !important; }
body.home-page .home-tools .grid > div > div:first-child {
  width: 36px !important;
  height: 36px !important;
  margin-bottom: 22px !important;
  background: transparent !important;
  color: var(--signal) !important;
  border-radius: 0 !important;
}
body.home-page .home-tools .grid h3 { font-size: 19px !important; }
body.home-page .home-tools .grid p { color: #606a60 !important; font-size: 13px !important; }
body.home-page .home-tools .grid a { color: var(--signal-dark) !important; font-weight: 600 !important; }

body.home-page .home-faq { background: var(--paper-light) !important; }
body.home-page .home-faq > div { max-width: 900px !important; }
body.home-page .home-faq > div > div:first-child { text-align: left !important; }
body.home-page .home-faq .mt-12 { margin-top: 38px !important; }
body.home-page .home-faq .mt-12 > div {
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
}
body.home-page .home-faq .faq-toggle {
  padding: 20px 2px !important;
  background: transparent !important;
  color: var(--ink) !important;
  font-weight: 500 !important;
}
body.home-page .home-faq .faq-content { padding-inline: 2px !important; color: #59645b !important; }
body.home-page .home-faq i { color: var(--signal) !important; }

body.home-page .home-cta { padding: clamp(64px, 8vw, 100px) 24px !important; }
body.home-page .home-cta > div { max-width: 1320px !important; }
body.home-page .home-cta .hero-gradient {
  padding: clamp(48px, 7vw, 80px) clamp(20px, 6vw, 80px) !important;
  background: var(--signal) !important;
  border-radius: 3px !important;
  text-align: left !important;
}
body.home-page .home-cta .hero-gradient h2 { max-width: 820px; color: var(--paper-light) !important; font-size: clamp(38px, 5vw, 62px) !important; line-height: 1 !important; }
body.home-page .home-cta .hero-gradient p { margin-inline: 0 !important; color: #e0e9df !important; }
body.home-page .home-cta .hero-gradient a { background: var(--ink) !important; color: #fffefa !important; border-radius: 3px !important; }
body.home-page .home-cta .hero-gradient .mt-8.flex { justify-content: flex-start !important; }
body.home-page .home-cta .hero-gradient > .absolute { display: none !important; }

/* The same hierarchy carries through cropper, tool directory, and editorial pages. */
body > section.hero-gradient:not(.home-hero):not(.home-workflow) {
  width: min(calc(100% - 48px), 1320px) !important;
  margin: 0 auto !important;
  background: var(--paper) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
}
body > section.hero-gradient:not(.home-hero):not(.home-workflow) h1 { color: var(--ink) !important; }
body > section.hero-gradient:not(.home-hero):not(.home-workflow) p { color: #59645b !important; }
body > section.hero-gradient:not(.home-hero):not(.home-workflow) a { border-radius: 3px !important; box-shadow: none !important; }
body:not(.home-page) > section.hero-gradient:not(:first-of-type) {
  margin-block: 28px !important;
  background: var(--ink) !important;
  border: 0 !important;
  border-radius: 3px !important;
}
body:not(.home-page) > section.hero-gradient:not(:first-of-type) h2,
body:not(.home-page) > section.hero-gradient:not(:first-of-type) p { color: var(--paper-light) !important; }
body > main > section:first-child.hero-gradient {
  width: auto !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: clamp(64px, 9vw, 120px) clamp(24px, 7vw, 88px) !important;
  background: var(--ink) !important;
  border: 0 !important;
  border-radius: 3px !important;
}
body > main > section:first-child.hero-gradient h1 { color: var(--paper-light) !important; }
body > main > section:first-child.hero-gradient p { color: #c9d0c8 !important; }
body > main > section:first-child.hero-gradient > .absolute { display: none !important; }
body > main > section:first-child.hero-gradient span { background: #e5eddc !important; color: var(--ink) !important; }
body > main > section:first-child:not(.hero-gradient) > div[class*="bg-[#001f3f]"] {
  background: var(--ink) !important;
  border-left: 4px solid var(--signal) !important;
  border-radius: 3px !important;
}

body > main > article > header {
  border-top-color: var(--signal) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
body > main > article > header h1 { color: var(--ink) !important; }
body > main > article .prose-like-content { color: #47534a !important; }
body > main > article .prose-like-content p { color: #47534a !important; }

body > main.max-w-6xl, body > main.max-w-7xl {
  max-width: 1440px !important;
  padding: 34px clamp(16px, 3vw, 40px) 76px !important;
}
body > main.max-w-6xl > section:first-child,
body > main.max-w-7xl > section:first-child {
  background: var(--paper-dark) !important;
  border: 1px solid var(--line) !important;
  border-left: 4px solid var(--signal) !important;
  border-radius: 3px !important;
}
body > main.max-w-6xl #uploadArea,
body > main.max-w-7xl #uploadArea {
  background: var(--paper-light) !important;
  border-color: var(--line-dark) !important;
  border-radius: 3px !important;
}
body > main.max-w-6xl aside, body > main.max-w-7xl aside,
body > main.max-w-6xl > section:nth-child(2) > div,
body > main.max-w-6xl > section:nth-child(2) > aside {
  background: var(--paper-light) !important;
  border-color: var(--line) !important;
  border-radius: 3px !important;
}
body > main.max-w-6xl #mergeBtn, body > main.max-w-6xl #chooseFilesBtn,
body > main.max-w-7xl button[class*="bg-[#6055F5]"] { background: var(--signal) !important; }
body > main input:focus, body > main select:focus, body > main textarea:focus { outline-color: var(--signal) !important; }

@media (max-width: 800px) {
  body.home-page > header + section.home-hero { width: min(calc(100% - 28px), 1320px) !important; }
  body.home-page > header + section.home-hero > div.relative { padding: 64px 4px 68px !important; }
  body.home-page > header + section.home-hero > div.relative > .grid { grid-template-columns: 1fr !important; gap: 42px !important; }
  body.home-page > header + section.home-hero h1 { font-size: clamp(48px, 11vw, 70px) !important; }
  body.home-page > header + section.home-hero .max-w-\[500px\] { transform: none; }
  body.home-page .home-features .grid > div + div,
  body.home-page .home-proof .grid > div + div,
  body.home-page .home-workflow .glass-card + .glass-card { border-left: 0 !important; }
  body.home-page .home-tools .grid > div { padding-inline: 14px !important; }
  body.home-page > .home-workflow { width: min(calc(100% - 28px), 1320px) !important; }
  body > section.hero-gradient:not(.home-hero):not(.home-workflow) { width: min(calc(100% - 28px), 1320px) !important; }
}
@media (max-width: 640px) {
  body > header > div:first-child { min-height: 62px !important; padding-inline: 16px !important; }
  body > header img { max-width: 168px !important; }
  body.home-page > header + section.home-hero { width: calc(100% - 36px) !important; }
  body.home-page > header + section.home-hero > div.relative { padding: 54px 0 !important; }
  body.home-page > header + section.home-hero h1 { font-size: clamp(44px, 12vw, 60px) !important; }
  body.home-page > .home-features,
  body.home-page > .home-proof,
  body.home-page > .home-tools,
  body.home-page > .home-faq { padding-block: 64px !important; }
  body.home-page .home-features .grid > div { padding: 22px 2px !important; }
  body.home-page .home-proof .grid > div { padding: 24px 4px !important; }
  #tutorial { padding: 64px 18px !important; }
  #tutorial .grid > .group { grid-template-columns: 1fr !important; grid-template-rows: auto auto auto auto !important; }
  #tutorial .group > div:first-child { grid-column: 1 !important; grid-row: 1 !important; }
  #tutorial .group h3 { grid-column: 1 !important; grid-row: 2 !important; }
  #tutorial .group p { grid-column: 1 !important; grid-row: 3 !important; }
  #tutorial .group img { grid-column: 1 !important; grid-row: 4 !important; aspect-ratio: 1.42; min-height: 0 !important; }
  body.home-page > .home-workflow { width: calc(100% - 28px) !important; padding-inline: 20px !important; }
  body.home-page .home-workflow .glass-card { padding: 24px 4px !important; }
  body.home-page .home-cta { padding-inline: 14px !important; }
  body > main > article { padding: 42px 18px 64px !important; }
}
body > main #blogGrid > article h3 { font-size: 22px !important; line-height: 1.16 !important; }
body > main #blogGrid > article > span:first-child { font-weight: 600 !important; }

/* Smaller display scale across page mastheads and section titles. */
body h1 { font-size: clamp(36px, 4.8vw, 64px) !important; }
body h2 { font-size: clamp(28px, 3.8vw, 48px) !important; }
body.home-page > header + section.home-hero h1 { font-size: clamp(46px, 5.5vw, 72px) !important; }
body.home-page .home-features h2,
body.home-page .home-tools h2,
body.home-page .home-faq h2 { font-size: clamp(34px, 4.2vw, 54px) !important; }
#tutorial h2 { font-size: clamp(36px, 4.8vw, 60px) !important; }
body.home-page .home-proof > div > h2 { font-size: clamp(30px, 3.8vw, 48px) !important; }
body.home-page .home-cta .hero-gradient h2 { font-size: clamp(34px, 4.2vw, 52px) !important; }
body > section.hero-gradient:not(.home-hero) h1 { font-size: clamp(38px, 4.8vw, 64px) !important; }
body > main > section:first-child.hero-gradient h1 { font-size: clamp(38px, 5.2vw, 66px) !important; }
body > main > section:first-child:not(.hero-gradient) h1 { font-size: clamp(38px, 4.8vw, 62px) !important; }
body > main > article > header h1 { font-size: clamp(38px, 4.8vw, 60px) !important; }
body > main.max-w-7xl > section:first-child h1 { font-size: clamp(28px, 3.6vw, 40px) !important; }

@media (max-width: 800px) {
  body.home-page > header + section.home-hero h1 { font-size: clamp(42px, 9vw, 62px) !important; }
  body.home-page .home-features h2,
  body.home-page .home-tools h2,
  body.home-page .home-faq h2 { font-size: clamp(32px, 7vw, 46px) !important; }
  #tutorial h2 { font-size: clamp(34px, 7vw, 52px) !important; }
}
@media (max-width: 640px) {
  body.home-page > header + section.home-hero h1 { font-size: clamp(40px, 10.5vw, 54px) !important; }
  body > main > article > header h1 { font-size: 38px !important; }
}

/* Cropper settings title and its controls icon. */
body > main.max-w-7xl aside h2 {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
}
body > main.max-w-7xl aside h2 > i.fa-sliders {
  display: inline-flex !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(96,85,245,.18) !important;
  border-radius: 50% !important;
  background: rgba(96,85,245,.10) !important;
  color: var(--signal) !important;
  font-size: 14px !important;
}
.workflow-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 40px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--line) !important;
  border-radius: 3px !important;
  background: var(--paper-light) !important;
  color: var(--ink-soft) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.workflow-pill.active {
  border-color: rgba(96,85,245,.32) !important;
  background: var(--signal-soft) !important;
  color: var(--signal-dark) !important;
}
body > main.max-w-7xl .mode-pill {
  border: 1px solid transparent !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
body > main.max-w-7xl .mode-pill.active {
  border-color: rgba(96,85,245,.28) !important;
  background: var(--signal-soft) !important;
  color: var(--signal-dark) !important;
}
.thermal-size-select {
  min-height: 38px !important;
  padding: 6px 28px 6px 10px !important;
  border: 1px solid var(--line) !important;
  border-radius: 3px !important;
  background: var(--paper-light) !important;
  color: var(--ink) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
@media (max-width: 640px) {
  body > main.max-w-7xl aside h2 { font-size: 20px !important; }
}

/* Keep the GST action label visible in the shared navigation. */
body > header a[href="https://okaygst.com/"] span {
  display: inline !important;
  background: transparent !important;
  color: inherit !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* The reset action is secondary; keep its purple tint instead of the global primary fill. */
body > main #uploadNewBtn {
  background: rgba(96, 85, 245, 0.10) !important;
  color: #5147E5 !important;
  border: 1px solid rgba(96, 85, 245, 0.18) !important;
  border-radius: 3px !important;
}
body > main #uploadNewBtn:hover {
  background: rgba(96, 85, 245, 0.16) !important;
}

/* Center homepage and marketplace landing heroes around their useful copy. */
body.home-page > header + section.home-hero > div.relative > .grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center !important;
}
body.home-page > header + section.home-hero > div.relative > .grid > div:first-child {
  width: min(100%, 900px) !important;
  text-align: center !important;
}
body.home-page > header + section.home-hero > div.relative > .grid > div:first-child .mb-6,
body.home-page > header + section.home-hero > div.relative > .grid > div:first-child .mt-8.flex {
  justify-content: center !important;
}
body.home-page > header + section.home-hero > div.relative {
  padding-top: clamp(60px, 7vw, 88px) !important;
  padding-bottom: clamp(62px, 7vw, 88px) !important;
}
body.home-page > header + section.home-hero h1 {
  font-size: clamp(40px, 4.7vw, 62px) !important;
  line-height: 1.02 !important;
}
body.home-page > header + section.home-hero p { margin-inline: auto !important; }
body.home-page > header + section.home-hero h1 { margin-inline: auto !important; }

body > section.platform-hero {
  width: min(calc(100% - 48px), 1320px) !important;
  margin: 0 auto 32px !important;
  padding: clamp(58px, 8vw, 96px) 24px !important;
  overflow: visible !important;
  background: var(--paper) !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-align: center !important;
}
body > section.platform-hero > div.relative {
  max-width: 1000px !important;
  padding: 0 !important;
  margin-inline: auto !important;
}
body > section.platform-hero > div.relative > div { max-width: 900px !important; margin-inline: auto !important; }
body > section.platform-hero h1 {
  max-width: 900px !important;
  margin-inline: auto !important;
  color: var(--ink) !important;
  font-size: clamp(38px, 5vw, 64px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.055em !important;
}
body > section.platform-hero p {
  max-width: 680px !important;
  margin: 18px auto 0 !important;
  color: #596259 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}
body > section.platform-hero a[href*="/crop/"] {
  margin-top: 26px !important;
  background: var(--signal) !important;
  color: #fff !important;
  border: 1px solid var(--signal) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}

/* Cropper heading: plain logo and copy, compact type, circular back control. */
body > main.max-w-7xl > section.tool-titlebar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
body > main.max-w-7xl > section.tool-titlebar > div {
  min-width: 0;
  gap: 12px !important;
}
body > main.max-w-7xl > section.tool-titlebar h1 {
  margin: 0 !important;
  font-size: clamp(21px, 2.4vw, 28px) !important;
  line-height: 1.2 !important;
  letter-spacing: -.035em !important;
}
body > main.max-w-7xl > section.tool-titlebar p {
  margin: 4px 0 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
body > main.max-w-7xl > section.tool-titlebar .tool-platform-logo {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body > main.max-w-7xl > section.tool-titlebar .tool-platform-logo img { max-width: 34px; max-height: 34px; }
.tool-back-link {
  display: inline-flex;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(96, 85, 245, .18);
  border-radius: 50%;
  background: rgba(96, 85, 245, .10);
  color: var(--signal) !important;
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease;
}
.tool-back-link:hover { background: rgba(96, 85, 245, .16); border-color: rgba(96, 85, 245, .28); }
body > main.max-w-7xl > section:nth-child(2) > div:first-child,
body > main.max-w-7xl > section:nth-child(2) > aside {
  border: 1px solid var(--line) !important;
  border-radius: 3px !important;
  background: var(--paper-light) !important;
  box-shadow: none !important;
}
body > main.max-w-7xl #uploadArea {
  border: 1px dashed var(--line-dark) !important;
  border-radius: 3px !important;
  background: var(--paper-dark) !important;
}

@media (max-width: 640px) {
  body > section.platform-hero { width: calc(100% - 28px) !important; padding: 52px 14px !important; }
  body.home-page > header + section.home-hero > div.relative { padding: 58px 14px 64px !important; }
  body.home-page > header + section.home-hero h1 { font-size: clamp(38px, 9vw, 52px) !important; }
  body > main.max-w-7xl > section.tool-titlebar { align-items: flex-start !important; }
  body > main.max-w-7xl > section.tool-titlebar h1 { font-size: 21px !important; }
}

/* Keep platform landing hero overrides ahead of older dark-panel rules. */
body > section.hero-gradient.platform-hero:not(.home-hero):not(.home-workflow) {
  width: min(calc(100% - 48px), 1320px) !important;
  margin: 0 auto 32px !important;
  padding: clamp(58px, 8vw, 96px) 24px !important;
  overflow: visible !important;
  background: var(--paper) !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-align: center !important;
}
body > section.hero-gradient.platform-hero:not(.home-hero):not(.home-workflow) h1 {
  max-width: 900px !important;
  margin-inline: auto !important;
  color: var(--ink) !important;
  font-size: clamp(36px, 4.5vw, 58px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.055em !important;
}
body > section.hero-gradient.platform-hero:not(.home-hero):not(.home-workflow) p {
  max-width: 680px !important;
  margin: 18px auto 0 !important;
  color: #596259 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}
body > section.hero-gradient.platform-hero:not(.home-hero):not(.home-workflow) a[href*="/crop/"] {
  margin-top: 26px !important;
  background: var(--signal) !important;
  color: #fff !important;
  border: 1px solid var(--signal) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}
@media (max-width: 640px) {
  body > section.hero-gradient.platform-hero:not(.home-hero):not(.home-workflow) {
    width: calc(100% - 28px) !important;
    padding: 52px 14px !important;
  }
  body > section.hero-gradient.platform-hero:not(.home-hero):not(.home-workflow) h1 {
    font-size: clamp(34px, 8vw, 48px) !important;
  }
}

/* Align the three site frame containers to the same centered measure. */
:root { --site-container-width: 1320px; }
body > header > div:first-child,
body > main,
body > main.max-w-6xl,
body > main.max-w-7xl,
body > footer > div:first-child {
  width: min(calc(100% - 48px), var(--site-container-width)) !important;
  max-width: var(--site-container-width) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  box-sizing: border-box !important;
}
body > header > div:first-child { min-height: 74px; }
body > main,
body > main.max-w-6xl,
body > main.max-w-7xl { padding: 34px 0 76px !important; }
body > footer > div:first-child { padding-top: 64px !important; padding-bottom: 64px !important; }
body > footer img { max-height: 36px !important; width: auto !important; }

/* Green makes the external GST action distinct from the purple product controls. */
body > header a[href="https://okaygst.com/"] {
  background: #2f6b4f !important;
  border-color: #2f6b4f !important;
  color: #fff !important;
}
body > header a[href="https://okaygst.com/"]:hover {
  background: #24543e !important;
  border-color: #24543e !important;
}
body > header a[href="https://okaygst.com/"]:focus-visible {
  outline-color: #2f6b4f !important;
}

/* Keep homepage section introductions aligned and let the hero resolve to two lines. */
body.home-page > header + section.home-hero > div.relative > .grid > div:first-child {
  width: min(100%, 1240px) !important;
  max-width: 1240px !important;
  text-align: center !important;
}
body.home-page > header + section.home-hero h1 {
  width: 100% !important;
  max-width: 1240px !important;
  margin-inline: auto !important;
  font-size: clamp(38px, 4.3vw, 58px) !important;
  line-height: 1.04 !important;
  text-align: center !important;
}
body.home-page > header + section.home-hero h1 br.home-title-break { display: inline !important; }
body.home-page > header + section.home-hero p { text-align: center !important; }

body.home-page .home-features > div > div:first-child,
body.home-page .home-tools > div > div:first-child,
body.home-page .home-faq > div > div:first-child {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  margin: 0 auto 40px !important;
  text-align: center !important;
}
body.home-page .home-features > div > div:first-child p,
body.home-page .home-tools > div > div:first-child p,
body.home-page .home-faq > div > div:first-child p {
  margin-inline: auto !important;
  text-align: center !important;
}
body.home-page #tutorial > div { text-align: center !important; }
body.home-page #tutorial > div > h2 {
  max-width: 980px !important;
  margin-inline: auto !important;
  text-align: center !important;
}
body.home-page .home-proof > div > h2 {
  margin-inline: auto !important;
  text-align: center !important;
}
body.home-page .home-cta .hero-gradient { text-align: center !important; }
body.home-page .home-cta .hero-gradient h2,
body.home-page .home-cta .hero-gradient p {
  margin-inline: auto !important;
  text-align: center !important;
}
body.home-page .home-cta .hero-gradient .mt-8.flex { justify-content: center !important; }

@media (max-width: 640px) {
  body.home-page > header + section.home-hero h1 {
    font-size: clamp(36px, 9vw, 48px) !important;
  }
  body.home-page > header + section.home-hero h1 br.home-title-break { display: none !important; }
}