/* Shared presentation and contact flow for the MODUVA concept. */
.concept-eyebrow { color: #145cff; font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.concept-intro { padding: 16px 2px 12px; }
.concept-intro h1 { margin: 8px 0; font-size: 27px; line-height: 1.08; letter-spacing: -.045em; }
.concept-intro p, .concept-copy { color: #596474; font-size: 12px; line-height: 1.6; margin: 8px 0; }
.concept-stage { padding: 10px 12px; margin: 12px 0; border: 1px solid #dbe6fb; background: #f0f5ff; border-radius: 10px; }
.concept-stage strong { display: block; font-size: 11px; margin-bottom: 4px; color: #174cad; }
.concept-stage p { margin: 0; font-size: 11px; line-height: 1.5; }
.concept-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 12px 0; }
.concept-step { min-width: 0; background: #f5f6f8; border: 1px solid #e4e8ee; border-radius: 10px; padding: 6px; }
.concept-step img { width: 100%; height: 66px; display: block; object-fit: contain; border-radius: 6px; }
.concept-step span { display: block; padding-top: 6px; font-size: 10px; font-weight: 750; line-height: 1.4; }
.concept-presets { display: flex; gap: 6px; margin: 12px 0 8px; }
.concept-presets button { flex: 1; background: #182028; color: white; font: inherit; font-size: 11px; font-weight: 750; padding: 10px 8px; border: 1px solid #182028; border-radius: 8px; cursor: pointer; }
.concept-presets button + button { background: white; color: #182028; border-color: #d8dfe8; }
.concept-byline { font-size: 11px; line-height: 1.6; color: #596474; }
.concept-link { color: #145cff; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }
.concept-founder { border-top: 1px solid #e2e7ee; padding: 12px 2px; margin-top: 10px; }
.concept-founder h2 { margin: 0 0 6px; font-size: 14px; }
.concept-founder p { font-size: 11px; line-height: 1.6; color: #596474; margin: 6px 0; }
.concept-founder-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 9px; }
.concept-founder-links a { color: #145cff; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.estimate-note { margin: 2px 0 5px; color: #596474; font-size: 10px; line-height: 1.45; }
.panel-foot .total-line .lbl { letter-spacing: .025em; text-transform: none; }
.concept-secondary { border: 1px solid #cbd4e0; color: #182028; background: white; font: inherit; font-size: 11px; font-weight: 750; padding: 8px; border-radius: 9px; cursor: pointer; width: 100%; }
.concept-secondary:hover { border-color: #145cff; color: #145cff; }
.concept-future { border: 1px solid #e1e6ed; border-radius: 10px; background: #f7f8fa; padding: 12px 8px; margin: 12px 0; }
.concept-future summary { font-size: 12px; font-weight: 800; cursor: pointer; }
.concept-future > p { font-size: 11px; color: #596474; line-height: 1.6; }
.concept-future .cat-header h3 { font-size: 17px; }
.concept-future img.vision-overview { display: block; width: 100%; height: auto; border-radius: 7px; margin: 12px 0; }
.dpad-btn[hidden] { display: none !important; }
.concept-button:focus-visible, .concept-secondary:focus-visible, .concept-presets button:focus-visible, .concept-link:focus-visible { outline: 3px solid #145cff; outline-offset: 3px; }

.concept-dialog { width: min(560px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); overflow-y: auto; border: 1px solid #dce2ea; border-radius: 20px; padding: 28px; background: #fff; color: #182028; box-shadow: 0 25px 90px #14203533; }
.concept-dialog::backdrop { background: #14203588; backdrop-filter: blur(4px); }
.concept-dialog .dialog-close { float: right; border: 1px solid #dce2ea; border-radius: 50%; width: 32px; height: 32px; background: #fff; color: #182028; font-size: 22px; cursor: pointer; }
.concept-dialog h2 { font-size: 28px; line-height: 1.15; letter-spacing: -.035em; margin: 10px 35px 10px 0; }
.concept-dialog p { color: #596474; font-size: 13px; line-height: 1.6; }
.concept-dialog form { display: grid; gap: 14px; margin-top: 20px; }
.concept-dialog label { display: grid; gap: 6px; color: #263242; font-size: 12px; font-weight: 700; }
.concept-dialog label small { color: #687180; font-weight: 400; }
.concept-dialog input:not([type=checkbox]), .concept-dialog select, .concept-dialog textarea { width: 100%; min-width: 0; border: 1px solid #cbd4e0; border-radius: 8px; padding: 11px 12px; background: white; color: #182028; font: inherit; font-size: 14px; }
.concept-dialog input:focus-visible, .concept-dialog select:focus-visible, .concept-dialog textarea:focus-visible { outline: 2px solid #145cff; outline-offset: 2px; }
.concept-dialog .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.concept-dialog .consent-label { display: flex; align-items: flex-start; gap: 9px; font-weight: 400; font-size: 12px; line-height: 1.5; }
.concept-dialog .consent-label input { margin-top: 3px; accent-color: #145cff; }
.concept-dialog .privacy-note { font-size: 11px; margin: 0; }
.concept-dialog .submit-interest { border: 0; background: #182028; color: white; border-radius: 10px; padding: 13px 16px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.concept-dialog .submit-interest:hover { background: #145cff; }
.concept-dialog .submit-interest:disabled { opacity: .65; cursor: wait; }
.concept-dialog .form-status { margin: 0; font-size: 13px; }
.concept-dialog .form-status[data-error=true] { color: #b42318; }
.concept-dialog .form-status[data-success=true] { color: #19663a; background: #edf8f0; border: 1px solid #c2e3cb; padding: 12px; border-radius: 8px; }
.concept-dialog .form-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.concept-dialog [hidden] { display: none !important; }
.concept-dialog .concept-founder-links a { font-size: 13px; }
.concept-menu-note { max-width: 1200px; margin: 16px auto 40px; padding: 24px; border-top: 1px solid #dce2ea; }
.concept-menu-note h2 { margin-top: 0; font-size: 22px; }
.concept-menu-note p { max-width: 700px; color: #596474; font-size: 14px; line-height: 1.6; }
.concept-menu-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.concept-menu-actions .concept-secondary { width: auto; padding: 12px 18px; font-size: 13px; }
.hero-image .concept-steps { width: 100%; padding: 12px; }
.hero-image .concept-step img { height: 170px; }
.hero-image .concept-step span { font-size: 14px; padding: 10px; }

.shopping-notice { margin: 12px 0 16px; padding: 12px; border: 1px solid #dce3ed; border-radius: 10px; background: #f5f7fb; }
.shopping-notice strong { font-size: 12px; color: #253246; }
.shopping-notice p { margin: 5px 0 0; color: #617083; font-size: 11px; line-height: 1.55; }
.shopping-source { margin-top: 12px; padding-top: 10px; border-top: 1px solid #e5e9ef; font-size: 11px; line-height: 1.5; }
.shopping-link-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 9px; }
.shopping-link, .shopping-extra-link { color: #2458a7; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.shopping-link:hover, .shopping-extra-link:hover { color: #123a75; }
.shopping-link:focus-visible, .shopping-extra-link:focus-visible, .shopping-fit summary:focus-visible { outline: 2px solid #145cff; outline-offset: 4px; border-radius: 2px; }
.shopping-store { color: #6b7482; font-size: 10px; }
.shopping-badge { display: inline-block; margin: 6px 0 0; padding: 2px 6px; border-radius: 4px; color: #765321; background: #faf3e5; font-size: 9px; font-weight: 600; }
.shopping-fit { margin-top: 6px; min-width: 0; }
.shopping-fit summary { width: fit-content; cursor: pointer; color: #596779; font-size: 10px; }
.shopping-fit-body { margin-top: 8px; padding: 10px; border-radius: 7px; background: #f6f8fb; color: #526174; overflow-wrap: anywhere; }
.shopping-fit-body strong { display: block; color: #334155; font-size: 11px; }
.shopping-fit-body p { margin: 5px 0 0; font-size: 11px; line-height: 1.6; }
.shopping-extra { margin-top: 10px; padding-top: 9px; border-top: 1px solid #dde4ee; }
.concept-spec-note { color: #6d7887; font-size: 10px !important; font-style: italic; }
#catalog > .shopping-notice { max-width: 780px; margin-bottom: 28px; }

@media (max-width: 900px) {
  .concept-intro h1 { font-size: 23px; }
  .concept-step img { height: 46px; }
  .concept-step span { font-size: 9px; }
}
@media (max-width: 600px) {
  .concept-intro { padding-top: 10px; }
  .concept-intro h1 { font-size: 20px; }
  .concept-intro p { font-size: 11px; }
  .concept-steps { gap: 3px; }
  .concept-step { padding: 4px; border-radius: 6px; }
  .concept-step img { height: 34px; }
  .concept-step span { font-size: 8px; }
  .concept-stage { padding: 8px; }
  .concept-stage p, .concept-stage strong { font-size: 10px; }
  .concept-presets { flex-direction: column; }
  .concept-presets button { padding: 8px 5px; }
  .estimate-note { font-size: 9px; }
  .panel-foot .total-line { align-items: flex-start; }
  .concept-secondary { padding: 6px; font-size: 10px; }
  .concept-dialog { padding: 20px; border-radius: 15px; }
  .concept-dialog .form-row { grid-template-columns: 1fr; }
  .concept-dialog h2 { font-size: 24px; }
}
/* The concept and contact form remain readable on phones held upright. */
@media (orientation: portrait) and (max-width: 600px) {
  .rotate-overlay { display: none !important; }
  .panel { width: 100vw; }
  .panel-head { padding: 10px 42px 10px 4px; }
  .panel-head .brand { font-size: 18px; }
  .panel-head .brand small { font-size: 10px; }
  .concept-intro { padding: 16px 8px 10px; }
  .concept-intro h1 { font-size: 32px; }
  .concept-intro p { font-size: 13px; }
  .concept-step img { height: 76px; }
  .concept-step span { font-size: 11px; }
  .concept-stage p, .concept-stage strong { font-size: 12px; }
  .concept-presets { flex-direction: row; }
  .concept-presets button { font-size: 12px; padding: 12px 8px; }
  .concept-founder { padding: 14px 8px; }
  .concept-founder p, .concept-founder-links a { font-size: 12px; }
  .panel-foot { padding: 10px 8px; gap: 6px; }
  .panel-foot .total-line .lbl { font-size: 11px; }
  .panel-foot .total-line .amt { font-size: 17px; }
  .panel-foot .cta, .panel-foot .concept-secondary { padding: 11px; font-size: 12px; }
  .estimate-note { font-size: 10px; }
  .stage.with-panel { left: 0; }
}