/* Final non-hero refinements: readable previews, intentional image framing,
   and comfortable controls across the approved dark studio design. */

/* Supporting copy should remain readable at every breakpoint. */
.at-process p,
.dd-identity-steps p,
.dt-journal-card > p:not(.dt-journal-label),
.dt-service-copy > p:not(.eyebrow):not(.dt-scope-note),
.dt-home-faq .faq > div > p:not(.eyebrow) {
  font-size: 14px;
  line-height: 1.8;
}
.dt-service-copy li { font-size: 14px; line-height: 1.75; }
.dt-service-copy h4 { font-size: 12px; }
.at-portfolio-note,
.at-project-caption p,
.dt-service-copy .dt-scope-note,
.dt-journal-label,
.dt-visual-note,
.sc-preview-caption,
.identity-footnote { font-size: 12px; line-height: 1.7; }
.at-project-caption p,
.at-portfolio-note,
.dt-journal-label,
.dt-visual-note { color: #a0b8c1; }
.dt-journal-card > .text-link { font-size: 13px; }
.at-circle { width: 44px; height: 44px; flex-basis: 44px; }
.dt-studio-picture > span { font-size: 11px; padding: 7px 10px; }

/* These are compact interface previews. Retain the hierarchy instead of
   reducing every piece of interface text to illegible miniature type. */
.dt-preview-nav > b { font-size: clamp(15px, 2.6cqw, 21px); }
.dt-preview-nav > span,
.dt-service-visual .dt-preview-nav > span { font-size: clamp(9px, 1.4cqw, 11px); }
.dt-preview-copy { width: 46%; }
.dt-preview-copy p,
.dt-service-visual .dt-preview-copy p {
  font-size: clamp(11px, 1.8cqw, 14px);
  line-height: 1.55;
  max-width: 95%;
  margin: 12px 0;
}
.dt-preview-button { font-size: clamp(10px, 1.6cqw, 13px); line-height: 1.45; }
.dt-preview-index { font-size: clamp(9px, 1.3cqw, 11px); }
.dt-concept-move .dt-preview-copy p { font-size: clamp(11px, 1.7cqw, 13px); }
.dt-concept-move .dt-preview-copy { top: 24%; }

.dt-flow-app { grid-template-columns: 24% minmax(0, 1fr); }
.dt-flow-app aside { gap: 8%; font-size: clamp(10px, 1.6cqw, 13px); padding: 15% 12%; }
.dt-flow-app aside > b { font-size: clamp(16px, 3cqw, 24px); }
.dt-flow-app aside > span { white-space: normal; }
.dt-flow-main,
.dt-service-visual .dt-flow-main { display: flex; flex-direction: column; justify-content: flex-start; padding: 5%; min-height: 0; height: 100%; }
.dt-flow-search,
.dt-flow-foot { display: none; }
.dt-flow-heading { margin: 0 0 12px; }
.dt-flow-heading > strong { font-size: clamp(17px, 3cqw, 24px); line-height: 1.2; }
.dt-flow-heading > span { font-size: clamp(10px, 1.5cqw, 12px); padding: 6px 10px; line-height: 1.3; }
.dt-flow-tabs { font-size: clamp(10px, 1.5cqw, 12px); padding-bottom: 8px; flex-shrink: 0; }
.dt-flow-tabs > b { padding-bottom: 4px; }
.dt-flow-rows { flex: 1; min-height: 0; grid-template-rows: repeat(4, minmax(0, 1fr)); margin-top: 10px; gap: 6px; }
.dt-flow-rows > div,
.dt-service-visual .dt-flow-rows > div { min-height: 0; padding: 3px 8px; gap: 10px; }
.dt-flow-rows > div > i { font-size: 10px; flex-basis: 18px; }
.dt-flow-rows strong { font-size: clamp(11px, 1.8cqw, 14px); line-height: 1.3; }
.dt-flow-rows strong > small { display: none; }
.dt-flow-rows em { font-size: 16px; }
.dt-flow-progress { width: 19%; flex-shrink: 0; }

/* Browser and phone examples remain separate, proportionate frames. */
.sc-device-composition { align-items: start; grid-template-columns: minmax(0, 1fr) 270px; gap: 30px; padding: 36px; }
.sc-device-composition > div { min-width: 0; }
.sc-device-composition > .sc-phone-frame { width: 270px; margin-top: 20px; border-width: 7px; border-radius: 29px; }
.sc-browser-top { padding: 10px 14px; font-size: 10px; }
.sc-mini-nav { padding: 20px; font-size: 11px; }
.sc-mini-nav > b { font-size: 27px; }
.sc-mini-nav > span { font-size: 11px; }
.sc-mini-content { min-height: 270px; }
.sc-mini-content > div { padding: 24px 18px 24px 24px; }
.sc-mini-content > img { min-height: 270px; }
.sc-mini-content small { font-size: 9px; line-height: 1.5; }
.sc-mini-content strong { font-size: clamp(27px, 5.8cqw, 38px); letter-spacing: -.045em; }
.sc-mini-content p { font-size: 12px; line-height: 1.65; }
.sc-mini-content i { font-size: 11px; line-height: 1.5; }
.sc-mini-foot,
.sc-mini-products { font-size: 10px; line-height: 1.5; padding: 15px 20px; gap: 15px; }
.sc-mini-products { flex-wrap: wrap; }
.sc-mini-products span { gap: 4px 9px; }
.sc-mini-board { gap: 10px; padding: 10px 18px 24px; min-height: 270px; }
.sc-mini-board > div { padding: 12px 9px; }
.sc-mini-board small { font-size: 9px; }
.sc-mini-board article { font-size: 11px; padding: 11px 9px; }
.sc-mini-board article i { font-size: 9px; }
.sc-mobile-mockup .sc-mini-nav { padding: 20px 18px; }
.sc-mobile-mockup .sc-mini-nav > b { font-size: 25px; }
.sc-mobile-mockup .sc-mini-nav > span { display: none; }
.sc-mobile-mockup .sc-mini-content > div { padding: 23px 21px; }
.sc-mobile-mockup .sc-mini-content small { font-size: 9px; }
.sc-mobile-mockup .sc-mini-content strong { font-size: 32px; line-height: 1.12; }
.sc-mobile-mockup .sc-mini-content p { font-size: 12px; }
.sc-mobile-mockup .sc-mini-content i { font-size: 11px; }
.sc-mobile-mockup .sc-mini-content > img { min-height: 0; height: 170px; object-fit: cover; }
.sc-mobile-mockup .sc-mini-foot,
.sc-mobile-mockup .sc-mini-products { font-size: 10px; padding: 15px 18px; }
.sc-mobile-mockup .sc-mini-products { flex-direction: column; gap: 9px; }
.sc-mobile-mockup .sc-mini-products span { justify-content: space-between; }
.sc-mobile-mockup .sc-mini-board { padding: 4px 16px 20px; }
.sc-mobile-mockup .sc-mini-board > div { padding: 12px; }
.sc-mobile-mockup .sc-mini-board article { font-size: 12px; padding: 11px; }

/* Individual product photography should show the complete product. */
.nora-product-photo { background: #eeeae1; overflow: hidden; }
.forma-project-photo img { transform: none; object-position: center; }
.nora-product-photo img,
.nora-crop-0 img,
.nora-crop-1 img,
.nora-crop-2 img {
  object-fit: contain;
  object-position: center;
  transform: none;
  transform-origin: center;
}
.nora-product > p { font-size: 13px; line-height: 1.65; }
.nora-product-photo > span { font-size: 10px; line-height: 1.5; }
.nora-product button { min-height: 44px; font-size: 12px; }
.nora-cart .cart-quantity button { min-width: 44px; min-height: 44px; }
.nora-cart .cart-quantity .cart-remove { font-size: 12px; }
.demo-filters button,
.flow-advance { min-height: 44px; }
.move-demo[data-variant=everyday] .move-ad > img { filter: none; }
.move-demo .demo-filters button { background: transparent; color: #d4e4e4; border-color: #68848a; font-weight: 600; }
.move-demo .demo-filters button:hover { background: #244149; color: #f6fffc; border-color: #8bb2af; }
.move-demo .demo-filters button[aria-pressed=true],
.move-demo .demo-filters button[aria-pressed=true]:hover { background: #54dcb5; color: #082b24; border-color: #54dcb5; }

/* Retain actual form and pricing values while improving legibility. */
.price-card .period,
.price-card .popular { font-size: 12px; }
.price-card li,
.price-card .package-audience { font-size: 13px; line-height: 1.75; }
.price-card .amount { white-space: nowrap; }
.price-card .btn { min-height: 48px; }
.field label { font-size: 14px; }
.check-field small,
.contact-form-intro > p:last-child,
.calc-summary .quote-note { font-size: 13px; line-height: 1.7; }
.field input,
.field select,
.field textarea { font-size: 16px; }
.field input,
.field select { min-height: 48px; }
.field input::placeholder,
.field textarea::placeholder { color: #a9bdc5; }

/* Detailed search and advertising illustrations use a realistic type scale. */
.dd-ui-title,
.dd-ads-result small,
.dd-seo-result small,
.dd-ads-path,
.dd-seo-note { font-size: 11px; line-height: 1.6; }
.dd-ads-result p,
.dd-seo-result p,
.dt-search-result > p { font-size: 13px; line-height: 1.65; }
.dd-seo-checks strong { font-size: 12px; }
.dd-seo-checks small { font-size: 11px; }
.dt-search-result > span,
.dt-search-caption,
.dt-seo-preview > p { font-size: 11px; }
.dt-seo-grid > span { font-size: 12px; }

@container (max-width: 500px) {
  .dt-preview-nav > span,
  .dt-preview-index { display: none; }
  .dt-preview-copy p { display: none; }
  .dt-preview-copy,
  .dt-service-visual .dt-preview-copy { top: 30%; width: 49%; }
  .dt-concept-move .dt-preview-copy { top: 27%; }
  .dt-preview-button { display: inline-block; margin-top: 14px; font-size: 11px; }
  .dt-flow-app { grid-template-columns: 1fr; }
  .dt-flow-app aside { display: none; }
  .dt-flow-main,
  .dt-service-visual .dt-flow-main { padding: 12px 16px; }
  .dt-flow-heading { margin-bottom: 8px; }
  .dt-flow-heading > strong { font-size: 19px; }
  .dt-flow-tabs { display: none; }
  .dt-flow-rows strong > small,
  .dt-flow-rows > div:last-child { display: none; }
  .dt-flow-rows { grid-template-rows: repeat(3, minmax(0, 1fr)); margin-top: 0; gap: 5px; }
  .dt-flow-rows strong { font-size: 12px; }
}

@media (max-width: 1100px) {
  .sc-device-composition { grid-template-columns: minmax(0, 1fr) 235px; padding: 26px; gap: 24px; }
  .sc-device-composition > .sc-phone-frame { width: 235px; }
  .sc-mini-nav > span { display: none; }
  .sc-mini-content > div { padding: 22px 15px; }
  .sc-mobile-mockup .sc-mini-content strong { font-size: 29px; }
}

@media (max-width: 900px) {
  .sc-device-composition { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .sc-device-composition > .sc-phone-frame { width: 280px; justify-self: center; margin-top: 0; }
  .sc-device-composition > div:first-child .sc-mini-content { min-height: 270px; }
  .sc-device-composition > div:first-child .sc-mini-content > img { min-height: 270px; }
  .sc-device-composition > div:first-child .sc-mini-content > div { padding: 25px 22px; }
  .sc-device-composition > div:first-child .sc-mini-content strong { font-size: clamp(27px, 5.8cqw, 38px); }
  .sc-device-composition > div:first-child .sc-mini-content p { font-size: 12px; }
  .sc-device-composition > div:first-child .sc-mini-content i { font-size: 11px; }
  .sc-device-composition > div:first-child .sc-mini-content small { font-size: 9px; }
  .sc-device-composition > div:first-child .sc-mini-nav { padding: 20px 22px; }
  .sc-mobile-mockup .sc-mini-content strong { font-size: 32px; }
}

@media (max-width: 680px) {
  .at-project-grid { grid-template-columns: 1fr; }
  .at-project-caption h3 a { flex-direction: row; align-items: baseline; flex-wrap: wrap; }
  .at-project-caption h3 span { font-size: 12px; }
  .dt-journal-card { display: block; }
  .dt-journal-image { aspect-ratio: 1.75; }
  .dt-journal-label { margin-top: 18px; }
  .dt-seo-grid { grid-template-columns: 1fr; gap: 8px; }
  .dt-seo-preview { min-height: 0; }
}

@media (max-width: 520px) {
  .sc-device-composition { display: grid; padding: 16px; }
  .sc-device-composition > .sc-phone-frame { width: min(100%, 280px); align-self: auto; }
  .sc-device-composition > div:first-child .sc-mini-content { grid-template-columns: 1fr; }
  .sc-device-composition > div:first-child .sc-mini-content > div { padding: 25px 22px; }
  .sc-device-composition > div:first-child .sc-mini-content > img { min-height: 0; height: 185px; }
  .sc-device-composition > div:first-child .sc-mini-content strong { font-size: 31px; }
  .sc-device-composition .sc-mobile-mockup .sc-mini-content strong { font-size: 32px; }
  .sc-mini-foot { flex-wrap: wrap; }
  .sc-mini-board { grid-template-columns: 1fr; min-height: 0; }
  .sc-mini-board article { font-size: 12px; }
  .sc-project-meta { flex-wrap: wrap; font-size: 11px; gap: 4px 12px; }
  .sc-project-card .text-link { font-size: 13px; }
  .nora-product-photo { height: 210px; }
  .nora-product > div:last-child { align-items: stretch; flex-direction: column; gap: 10px; }
  .nora-product button { width: 100%; }
  .nora-product > p { font-size: 12px; }
  .dd-seo-checks { grid-template-columns: 1fr; gap: 14px; }
  .dd-ads-path { flex-wrap: wrap; gap: 10px; font-size: 11px; }
  .dd-ads-search,
  .dd-seo-query { font-size: 13px; }
  .price-card .amount { font-size: clamp(32px, 9vw, 39px); }
  .at-project-caption h3 span { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .dt-preview-surface { transform: none !important; transition: none; }
}