/* The same editorial rhythm, composed for the space available. */
:root {
  --site-gutter: clamp(20px, 4.5vw, 96px);
  --frame-inset: max(var(--site-gutter), calc((100% - var(--site-width)) / 2));
  --pinned-header-height: 74px;
}
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--pinned-header-height) + 20px); }
h1, h2, h3, h4 { text-wrap: balance; }
button, a { touch-action: manipulation; }
.section, .experience-inner, .hero-content, .channel-expression { min-width: 0; }
.site-header { padding-inline: var(--frame-inset); gap: clamp(24px, 3vw, 48px); }
/* Land on the section's opening copy, accounting for its own top padding. */
#platform, #approach { scroll-margin-top: calc(-1 * var(--section-space)); }
.desktop-nav a, .desktop-nav button, .login { min-height: 44px; display: inline-flex; align-items: center; }
.header-contact { min-height: 44px; white-space: nowrap; }
.menu-toggle { min-width: 44px; justify-content: center; }
.hero-content { max-width: calc(var(--site-width) + var(--site-gutter) * 2); margin-inline: auto; padding-left: var(--site-gutter); }
.site-footer { padding-inline: var(--frame-inset); }
.hero-intro { max-width: 390px; }
.hero-intro p { font-size: 1.0625rem; line-height: 1.6; }
.hero h1 { font-size: clamp(4.5rem, 8.1vw, 9rem); }
.footer-bottom, #toggle-motion { font-size: .8125rem; }
.footer-bottom a { min-height: 44px; }
.touch-copy { display: none; }

/* Product detail stays readable; photographs and copy share the available space. */
.experience-heading { gap: clamp(28px, 5vw, 80px); }
.experience-heading > div { min-width: 0; }
.product-opportunity { flex: 0 1 420px; font-size: 1.0625rem; }
.catalogue-feature, .catalogue-feature[data-editing=true] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.catalogue-feature-image { min-height: 36rem; }
.catalogue-feature-copy, .catalogue-feature[data-editing=true] .catalogue-feature-copy { padding: clamp(28px, 3.2vw, 52px); }
.catalogue-feature-top { flex-wrap: wrap; gap: 8px 20px; margin-bottom: 32px; }
.catalogue-feature-top .micro-label, .catalogue-image-caption, .catalogue-sample-note { font-size: .75rem; }
.catalogue-feature-top button { font-size: .875rem; }
.catalogue-feature h3 { font-size: clamp(2rem, 3.05vw, 3.2rem); overflow-wrap: anywhere; }
.featured-description { font-size: 1rem; }
.featured-facts { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; }
.featured-facts dt, .catalogue-potential > span { font-size: .75rem; }
.featured-facts dd, .catalogue-potential p { font-size: .875rem; }
.featured-facts dd { overflow-wrap: anywhere; }
.catalogue-potential { margin-block: 24px; }
.catalogue-sample-note { margin-top: 18px; }
.inline-studio-bar { align-items: center; flex-wrap: wrap; gap: 12px 20px; }
.inline-studio-bar > div { min-width: 0; flex: 1 1 160px; }
.inline-studio-bar span { font-size: .8125rem; overflow-wrap: anywhere; }
.inline-studio-bar button { font-size: .875rem; }
.catalogue-feature .attribute-panel-heading .micro-label { font-size: .75rem; }
.catalogue-feature .attribute-panel-heading > p:last-child { font-size: 1rem; line-height: 1.6; }
.experience, .catalogue-feature, .catalogue-feature .attribute-workspace { scroll-margin-top: 16px; }
.catalogue-feature .attribute-progress { gap: 12px; flex-wrap: wrap; }
.catalogue-feature .attribute-progress li { gap: 8px; font-size: .875rem; }
.catalogue-feature .attribute-permissions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.catalogue-feature .attribute-permissions strong { font-size: 1rem; }
.catalogue-feature .attribute-permissions small { display: block; font-size: .8125rem; }
.catalogue-feature .attribute-permissions > label { min-height: 80px; padding-block: 18px; margin: 0; }
.catalogue-feature input[type=checkbox] { width: 20px; height: 20px; margin: 0; }
.catalogue-feature .attribute-action { flex-wrap: wrap; gap: 12px 20px; }
.catalogue-feature .attribute-action .ui-button, .catalogue-feature .attribute-action .ui-text-button,
.catalogue-feature .attribute-review-toolbar > button { font-size: .875rem; }
.catalogue-feature .attribute-action p { font-size: .8125rem; }
.catalogue-feature .attribute-action .ui-button { min-height: 48px; }
.attribute-output-tabs { gap: 4px; }
.attribute-output-tabs button { min-height: 44px; font-size: .875rem; padding: 10px 12px; }
.catalogue-feature .attribute-review-toolbar { flex-wrap: wrap; gap: 8px 16px; }
.catalogue-feature .attribute-view-toggle button { min-height: 44px; font-size: .875rem; padding: 10px 14px; }
.catalogue-feature .attribute-draft-heading { flex-wrap: wrap; gap: 8px 16px; }
.catalogue-feature .attribute-draft-heading h5 { font-size: 1rem; }
.catalogue-feature .attribute-field-name { font-size: .75rem; }
.catalogue-feature .attribute-keep { min-height: 44px; font-size: .875rem; }
.catalogue-feature .attribute-value { font-size: 1rem; line-height: 1.65; overflow-wrap: anywhere; }
.attribute-value dl > div { display: grid; grid-template-columns: minmax(80px, .55fr) minmax(0, 1fr); gap: 16px; }
.attribute-value dt { font-size: .875rem; }
.attribute-qa summary, .attribute-qa > p { font-size: 1rem; }
.attribute-qa summary { min-height: 48px; }
.catalogue-feature .attribute-evidence summary { min-height: 44px; font-size: .875rem; padding-block: 12px; }
.attribute-evidence dd { overflow-wrap: anywhere; }
.attribute-saved, .attribute-unchanged { font-size: .8125rem; }

/* A compact catalogue with room to select, read and correct each product. */
.catalogue-editorial { align-items: start; gap: clamp(28px, 5vw, 80px); margin-bottom: 32px; }
.heatmap-toolbar { flex-wrap: wrap; gap: 20px; }
.heatmap-identity > span, .heatmap-toolbar .ui-button { font-size: .875rem; }
.heatmap-tally { flex-wrap: wrap; font-size: .8125rem; gap: 10px 18px; }
.heatmap-toolbar .ui-button { min-height: 44px; }
.catalogue-grid { gap: 4px; }
.heatmap-foot, .catalogue-bottom > p { font-size: .8125rem; }
.catalogue-bottom button { font-size: .875rem; }
.heatmap-open-hint > span { padding: 0; }
.heatmap-preview { width: min(400px, calc(100vw - 32px)); padding: 24px; }
.heatmap-preview-top > span, #heatmap-preview-status, .heatmap-source-note { font-size: .75rem; }
.heatmap-preview-top button { width: 44px; height: 44px; flex-shrink: 0; }
.heatmap-preview h4 { font-size: 1.25rem; }
.heatmap-issue h5, .heatmap-issue dd, .heatmap-clean-facts > div, .heatmap-clean-message { font-size: .875rem; }
.heatmap-issue dt { font-size: .75rem; }
.heatmap-issue dl > div { grid-template-columns: 90px minmax(0, 1fr); gap: 16px; }
.heatmap-preview-actions button { font-size: .875rem; }
.heatmap-preview.is-inline { position: static; grid-column: 1 / -1; width: auto; margin-block: 12px; padding: 24px; box-shadow: none; border: 0; border-block: 1px solid var(--color-border-strong); border-radius: 0; background: var(--color-bg); }
.heatmap-preview.is-inline h4 { scroll-margin-top: 100px; }

/* Source checks are part of the product story, with the evidence kept explicit. */
.supplier-check { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--color-border); }
.supplier-check-heading .eyebrow { margin-bottom: 18px; }
.supplier-check h3 { font-size: clamp(30px, 3vw, 44px); line-height: 1.1; letter-spacing: -.04em; }
.supplier-check-heading > p:last-child { font-size: 1rem; line-height: 1.65; color: var(--site-muted); max-width: 450px; margin-top: 22px; }
.supplier-check-steps { list-style: none; padding: 0; margin: 0; }
.supplier-check-steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 20px; padding-block: 20px; border-top: 1px solid var(--color-border); }
.supplier-check-steps li:first-child { padding-top: 0; border: 0; }
.supplier-check-steps li > span { font-size: .75rem; line-height: 1.5; color: var(--site-muted); padding-top: 3px; }
.supplier-check-steps h4 { font-size: 1rem; font-weight: 500; line-height: 1.5; margin: 0 0 8px; }
.supplier-check-steps p { font-size: 1rem; line-height: 1.6; color: var(--site-muted); max-width: 550px; }


/* A bounded masthead and generous imagery, without stretching the reading width. */
@media (min-width: 1600px) {
  .hero-content { padding-top: clamp(180px, 19svh, 230px); }
  .hero-intro { max-width: 420px; }
  .hero-intro p { font-size: 1.125rem; }
  .hero-landscape img { object-position: 50% 24%; }
  .catalogue-feature-image { min-height: 650px; }
}

/* Tablet: retain the editorial pairings where they fit; open the studio fully. */
@media (max-width: 1100px) {
  .catalogue-feature-top { flex-direction: row; align-items: center; }
  .catalogue-feature[data-editing=true] { grid-template-columns: 1fr; }
  .catalogue-feature[data-editing=true] .catalogue-feature-image { min-height: 0; height: clamp(180px, 24vw, 260px); }
  .catalogue-feature[data-editing=true] .catalogue-feature-image > img { padding: 16px 32px 38px; }
  .catalogue-feature[data-editing=true] .catalogue-feature-copy { padding: clamp(28px, 4.5vw, 44px); }
  .heatmap-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .heatmap-identity { margin: 0; }
  .heatmap-tally { grid-row: 2; grid-column: 1 / -1; width: 100%; margin: 0; justify-content: flex-start; }
  .heatmap-toolbar > .ui-button { grid-column: 2; grid-row: 1; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .catalogue-feature:not([data-editing=true]) { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .catalogue-feature-image { min-height: 500px; }
  .catalogue-feature-image > img { padding: 24px 24px 54px; }
  .featured-facts { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 900px) {
  .hero { display: flex; flex-direction: column; padding: 148px var(--site-gutter) 24px; }
  .hero-content { flex-shrink: 0; }
  .hero-content { padding: 0; margin: 0; }
  .hero h1 { font-size: clamp(64px, 10.3vw, 92px); }
  .hero-intro { max-width: 380px; }
  .hero-landscape img { width: 130%; left: -15%; height: 110%; object-position: 57% 50%; }
  .site-header { gap: 20px; }
  .mobile-nav:not([hidden]) { padding: 12px var(--site-gutter) 24px; max-height: calc(100dvh - var(--pinned-header-height)); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 18px 28px rgba(0,0,0,.04); }
  .mobile-nav a, .mobile-nav button { font-size: 1.5rem; line-height: 1.3; padding-block: 18px; border-top: 1px solid var(--color-border); }
  .mobile-nav a:last-child { font-size: 1rem; }
  .menu-lines { position: relative; width: 22px; height: 20px; border: 0; }
  .menu-lines::before, .menu-lines::after { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: currentColor; transform-origin: center; transition: transform .36s var(--site-ease); }
  .menu-lines::before { transform: translateY(-4px); }
  .menu-lines::after { transform: translateY(4px); }
  .menu-toggle[aria-expanded=true] .menu-lines::before { transform: translateY(0) rotate(45deg); }
  .menu-toggle[aria-expanded=true] .menu-lines::after { transform: translateY(0) rotate(-45deg); }
  .opening { gap: 8px; }
  .opening .eyebrow { margin-bottom: 18px; }
  .product-opportunity { max-width: 340px; font-size: 1rem; }
  .catalogue-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .pointer-copy { display: none; }
  .touch-copy { display: inline; }
}

/* Phone: images lead, controls have breathing room, and the page owns scrolling. */
@media (max-width: 760px) {
  :root { --section-space: clamp(44px, 7vw, 56px); --section-tail: 32px; }
  .experience-heading { display: block; }
  .experience-heading h2, .catalogue-editorial h3, .channel-editorial-heading h2 { font-size: clamp(34px, 6.8vw, 48px); }
  .product-opportunity { max-width: 560px; margin-top: 24px; }
  .catalogue-feature, .catalogue-feature[data-editing=true] { grid-template-columns: minmax(0, 1fr); margin-top: 30px; }
  .catalogue-feature-image { min-height: 0; height: clamp(280px, 74vw, 460px); aspect-ratio: auto; }
  .catalogue-feature-image > img { padding: 22px 28px 48px; }
  .catalogue-image-caption { left: 22px; bottom: 18px; }
  .catalogue-feature-copy, .catalogue-feature[data-editing=true] .catalogue-feature-copy { padding: 28px; }
  .catalogue-feature-top { margin-bottom: 24px; }
  .catalogue-feature h3 { font-size: clamp(30px, 5.8vw, 40px); }
  .featured-facts { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  #featured-overview > .ui-button { max-width: none; min-height: 50px; }
  .catalogue-editorial { grid-template-columns: 1fr; gap: 24px; }
  .catalogue-editorial > div:last-child { justify-self: start; }
  .catalogue-editorial .motion-kicker { margin-bottom: 18px; }
  .heatmap-shell { padding: 20px 16px 12px; margin-inline: 0; }
  .catalogue-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .heatmap-foot { gap: 16px; padding-top: 16px; min-height: 0; }
  .heatmap-foot > p { max-width: none; }
  .heatmap-open-hint { font-size: .75rem; max-width: 90px; white-space: normal; text-align: right; }
  .catalogue-bottom { gap: 8px; }
  .supplier-check { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 28px; padding-top: 28px; }
  .supplier-check-heading > p:last-child { max-width: 560px; }
  .supplier-check-steps li { gap: 16px; }
  .roll-closing > .eyebrow { margin-bottom: 24px; }
  .closing .kito-roll { font-size: clamp(42px, 9.6vw, 70px); }
  .roll-window { display: block; margin-top: 0; }
  .roll-closing-bottom { flex-direction: column; align-items: flex-start; margin-top: 24px; gap: 24px; }
  .roll-closing .button { margin: 0; }
  .footer-top { flex-direction: column; align-items: start; gap: 12px; }
  .footer-top nav { flex-wrap: wrap; gap: 10px 28px; }
  .footer-wordmark { margin-block: 28px; }
  .footer-bottom { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; }
  .footer-bottom > div { grid-column: 1 / -1; justify-content: flex-start; gap: 24px; flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .hero { padding-top: 120px; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .hero h1 { font-size: clamp(44px, 12.8vw, 76px); margin-left: -2px; margin-bottom: 24px; }
  .hero .eyebrow { max-width: none; font-size: .75rem; margin-bottom: 24px; letter-spacing: .055em; }
  .hero-intro { max-width: 370px; }
  .hero-intro p { font-size: 1rem; line-height: 1.55; margin-bottom: 24px; }
  .hero-landscape img { width: 170%; left: -35%; height: 110%; object-position: 55% 55%; }
  .header-actions { gap: 14px; }
  .header-contact { font-size: .75rem; padding: 10px 12px; gap: 12px; }
  .header-contact > .kito-icon { display: none; }
  .catalogue-feature-copy, .catalogue-feature[data-editing=true] .catalogue-feature-copy { padding: 24px 20px; }
  .catalogue-feature[data-editing=true] .catalogue-feature-image { height: 180px; }
  .catalogue-feature .attribute-permissions { grid-template-columns: minmax(0, 1fr); }
  .catalogue-feature .attribute-permissions > label { min-height: 76px; padding-block: 16px; }
  .catalogue-feature .attribute-permissions small { margin-top: 4px; }
  .catalogue-feature .attribute-action { align-items: stretch; }
  .catalogue-feature .attribute-action > .ui-button { width: 100%; margin-left: 0; }
  .catalogue-feature .attribute-action > p { flex-basis: 100%; }
  .attribute-output-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .attribute-output-tabs button { padding: 10px 5px; font-size: .8125rem; line-height: 1.35; }
  .attribute-evidence dl > div { grid-template-columns: 1fr; gap: 4px; padding-block: 10px; }
  .catalogue-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .heatmap-shell { margin-inline: -8px; padding: 18px 12px 12px; }
  .heatmap-toolbar { gap: 16px 12px; }
  .heatmap-identity { gap: 12px; }
  .heatmap-identity img { width: 52px; }
  .heatmap-identity > span { padding-left: 12px; font-size: .8125rem; }
  .heatmap-toolbar .ui-button { font-size: .8125rem; padding: 10px 12px; gap: 10px; }
  .heatmap-tally { gap: 8px 14px; font-size: .75rem; }
  .heatmap-preview.is-inline { padding: 20px 12px; }
  .heatmap-preview-actions { display: grid; grid-template-columns: 1fr; gap: 0; }
  .heatmap-preview-actions button, .heatmap-preview-actions button:last-child { justify-self: start; margin: 0; text-align: left; }
  .heatmap-issue dl > div { grid-template-columns: 1fr; gap: 3px; margin-top: 12px; }
  .roll-closing-bottom { width: 100%; }
  .roll-closing-bottom .button { width: 100%; }
  dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); padding: 56px 24px 28px; overscroll-behavior: contain; }
  #access-submit { width: 100%; }
  .form-privacy { font-size: .8125rem; line-height: 1.6; }
  .dialog-close { position: sticky; display: block; top: 0; margin: -42px -10px 2px auto; background: var(--color-bg); z-index: 1; }
}
@media (max-width: 360px) {
  .site-header { gap: 12px; }
  .header-actions { gap: 8px; }
  .header-contact { padding-inline: 10px; }
  .catalogue-feature-top { align-items: start; flex-direction: column; gap: 0; }
  .featured-facts { grid-template-columns: 1fr; gap: 16px; }
  .heatmap-identity > span { border: 0; padding: 0; }
  .heatmap-identity img { display: none; }
  .catalogue-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .footer-bottom { display: grid; grid-template-columns: 1fr auto; }
  .footer-bottom > div { grid-column: 1 / -1; }
}
@media (hover: none) {
  .pointer-copy { display: none; }
  .touch-copy { display: inline; }
  .button:hover, .text-link:hover span { transform: none; }
}
.is-motion-paused .menu-lines::before, .is-motion-paused .menu-lines::after { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .menu-lines::before, .menu-lines::after { transition: none; }
}