/* Home's single authored entrance: an order and its connected responsibility. */
.hero-scene {
  --hero-scene-ink: var(--ink);
  --hero-scene-muted: var(--muted);
  --hero-scene-iris: var(--iris);
  --hero-scene-ease: cubic-bezier(.16, 1, .3, 1);
  position: relative;
  isolation: isolate;
  margin: 0 12px;
  padding: 42px 0 22px;
  border-radius: 24px;
  background: var(--iris-light);
  color: var(--hero-scene-ink);
  overflow: clip;
}
.hero-scene *, .hero-scene *::before, .hero-scene *::after { box-sizing: border-box; }
.hero-scene ::selection { background: oklch(87.28% 0.0583 296.1); color: oklch(23.08% 0.0326 283.5); }
.hero-scene-message { text-align: left; padding-inline: 20px; }
.hero-scene h1 { margin: 0; font-size: clamp(40px, 6.5vw, 86px); line-height: 1.06; letter-spacing: -.04em; font-weight: 550; text-wrap: balance; }
.hero-scene-description { color: oklch(42.95% 0.0446 294.6); font-size: 15px; line-height: 1.8; margin: 24px auto 0; max-width: 52ch; }
.hero-scene-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.hero-scene-actions .button { min-height: 48px; padding: 12px 16px; font-size: 12px; gap: 13px; }
.hero-scene-actions .hero-scene-secondary { color: var(--hero-scene-ink); background: var(--paper); border-color: transparent; }
.hero-scene-actions .hero-scene-secondary:hover { background: var(--white); }
.hero-scene-product { width: min(1016px, calc(100% - 24px)); margin: 38px auto 0;  }
.hero-scene-workspace { background: oklch(99.00% 0.0054 297.7); border-radius: 14px; box-shadow: 0 24px 60px oklch(31.02% 0.0964 295.0 / 0.169); transform-origin: 50% 15%; }
.hero-scene-workspace-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px; border-bottom: 1px solid oklch(92.52% 0.0153 302.5); }
.hero-scene-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.hero-scene-brand .brand-mark { width: 24px; height: 24px; object-fit: contain; }
.hero-scene-brand strong { font-size: 14px; font-weight: 650; white-space: nowrap; }
.hero-scene-brand > span { display: none; font-size: 12px; color: var(--hero-scene-muted); padding-left: 13px; margin-left: 4px; border-left: 1px solid oklch(87.09% 0.0253 301.0); }
.hero-scene-preview-label { color: var(--hero-scene-muted); font-size: 12px; line-height: 1.4; text-align: right; }
.hero-scene-workspace-body { display: grid; }
.hero-scene-order { padding: 23px 19px 0; min-width: 0; }
.hero-scene-order-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 22px; }
.hero-scene-order-heading p { margin: 0 0 7px; color: var(--hero-scene-muted); font-size: 12px; }
.hero-scene-order-heading h2 { margin: 0; color: var(--hero-scene-ink); font-size: 24px; line-height: 1.3; font-weight: 550; letter-spacing: -.025em; }
.hero-scene-order-heading h2 span { font-variant-numeric: tabular-nums; }
.hero-scene-order-symbol { color: oklch(58.49% 0.0565 302.4); }
.hero-scene-order-symbol svg { width: 27px; height: 31px; }
.hero-scene-select-label { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 10px; color: var(--hero-scene-muted); font-size: 12px; }
.hero-scene-interaction-hint { display: inline-flex; align-items: center; gap: 6px; color: oklch(50.61% 0.1508 289.2); }
.hero-scene-interaction-hint svg { width: 12px; height: 12px; transform: rotate(90deg); }
.hero-scene-controls { display: grid; gap: 0; }
.hero-scene-control { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 68px; width: 100%; padding: 11px 13px; text-align: left; font-family: inherit; background: transparent; color: var(--hero-scene-ink); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; touch-action: manipulation; transition:none!important; }
.hero-scene-control:disabled { cursor: default; opacity: 1; }
.hero-scene-control[aria-selected=true] { background: oklch(93.72% 0.0246 298.6); border-color: oklch(81.95% 0.0623 297.5); }
.hero-scene-control-icon { color: oklch(53.61% 0.0547 303.4); display: inline-flex; }
.hero-scene-control-icon svg { width: 21px; height: 21px; }
.hero-scene-control[aria-selected=true] .hero-scene-control-icon { color: oklch(51.37% 0.1601 289.5); }
.hero-scene-control-copy { display: grid; gap: 3px; min-width: 0; }
.hero-scene-control-copy strong { font-size: 13px; font-weight: 650; line-height: 1.4; }
.hero-scene-control-copy > span { font-size: 12px; color: var(--hero-scene-muted); line-height: 1.45; }
.hero-scene-control-state { display: grid; place-items: center; flex-shrink: 0; width: 25px; height: 25px; margin-left: auto; border-radius: 50%; color: oklch(48.68% 0.0388 298.3); background: oklch(94.47% 0.0111 303.1); }
.hero-scene-control-state svg { width: 16px; height: 16px; }
.hero-scene-control-state-paid { background: oklch(93.60% 0.0232 161.7); color: oklch(45.27% 0.0755 162.1); }
.hero-scene-control-state-review { background: oklch(90.98% 0.0376 300.8); color: oklch(49.23% 0.1500 291.2); }
.hero-scene-control-arrow { display: none; color: oklch(51.37% 0.1601 289.5); }
.hero-scene-control-arrow svg { width: 17px; height: 17px; }
.hero-scene-order-note { font-size: 12px; color: var(--hero-scene-muted); line-height: 1.7; margin: 20px 0 0; }
.hero-scene-order-note br { display: none; }
.hero-scene-context { position: relative; min-width: 0; padding: 26px 12px 17px; }
.hero-scene-context-connector { display: none; }
.hero-scene-panel { --hero-scene-panel-accent: oklch(50.05% 0.1427 291.3); --hero-scene-panel-rule: oklch(83.66% 0.0470 300.6); --hero-scene-panel-copy: oklch(43.50% 0.0593 303.7); background: oklch(94.03% 0.0223 302.9); color: var(--hero-scene-ink); border-radius: 12px; min-height: 379px; padding: 23px 22px; box-shadow: none; }
.hero-scene-panel[hidden] { display: none !important; }
.hero-scene-panel-commerce { --hero-scene-panel-accent: oklch(47.22% 0.0660 160.6); --hero-scene-panel-rule: oklch(86.21% 0.0295 159.8); --hero-scene-panel-copy: oklch(46.79% 0.0440 158.4); background: oklch(95.07% 0.0158 154.5); }
.hero-scene-panel-pharmacy { --hero-scene-panel-accent: oklch(47.34% 0.0519 315.2); --hero-scene-panel-rule: oklch(85.19% 0.0324 319.5); --hero-scene-panel-copy: oklch(47.28% 0.0527 312.9); background: oklch(93.76% 0.0154 325.7); }
.hero-scene-panel-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--hero-scene-panel-copy); font-size: 12px; line-height: 1.5; }
.hero-scene-panel-top > span:first-child { display: flex; align-items: center; gap: 8px; }
.hero-scene-panel-top > span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-scene-panel-top svg { width: 17px; height: 17px; }
.hero-scene-panel-main { margin-top: 27px; }
.hero-scene-panel-status { display: inline-flex; align-items: center; gap: 7px; color: var(--hero-scene-panel-accent); font-size: 12px; font-weight: 650; }
.hero-scene-panel-status svg { width: 17px; height: 17px; }
.hero-scene-panel h3 { color: var(--hero-scene-ink); font-size: 34px; line-height: 1.07; font-weight: 550; letter-spacing: -.035em; margin: 13px 0 16px; }
.hero-scene-panel-main > p { color: var(--hero-scene-panel-copy); font-size: 14px; line-height: 1.7; margin: 0; max-width: 37ch; }
.hero-scene-panel-facts { display: grid; gap: 9px; padding: 18px 0; margin: 21px 0 0; border-top: 1px solid var(--hero-scene-panel-rule); }
.hero-scene-panel-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.hero-scene-panel-facts dt { font-size: 12px; color: var(--hero-scene-panel-copy); line-height: 1.5; }
.hero-scene-panel-facts dd { margin: 0; font-size: 12px; font-weight: 650; line-height: 1.5; }
.hero-scene-panel-note { padding-top: 14px; border-top: 1px solid var(--hero-scene-panel-rule); font-size: 12px; line-height: 1.65; color: var(--hero-scene-panel-copy); margin: 0; }
.hero-scene-workspace-foot { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px 20px; border-top: 1px solid oklch(92.52% 0.0153 302.5); font-size: 12px; line-height: 1.5; color: var(--hero-scene-muted); }
.hero-scene-workspace-foot > span:first-child { display: flex; align-items: center; gap: 8px; }
.hero-scene-workspace-foot .brand-mark { width: 18px; height: 18px; }
.hero-scene-workspace-foot > span:last-child { display: none; }
.hero-scene-caption { margin: 22px auto 0; padding-inline: 20px; color: oklch(43.68% 0.0563 297.5); font-size: 12px; line-height: 1.65; text-align: center; }
.hero-scene button:focus-visible, .hero-scene a:focus-visible, .hero-scene-panel:focus-visible { outline: 3px solid oklch(51.43% 0.1708 287.3); outline-offset: 4px; }
.hero-scene-panel:focus-visible { outline-offset: -5px; }
@media (hover: hover) {
  .hero-scene-control:not(:disabled):hover { background: oklch(95.13% 0.0137 299.8); border-color: oklch(76.97% 0.0621 298.8); }
  .hero-scene-control[aria-selected=true]:hover { background: oklch(92.48% 0.0304 300.3); }
}
@media (min-width: 540px) {
  .hero-scene { margin-inline: 20px; padding-top: 55px; }
  .hero-scene-message { padding-inline: 28px; }
  .hero-scene-description { font-size: 17px; }
  .hero-scene-actions .button { font-size: 14px; padding-inline: 22px; min-height: 52px; }
  .hero-scene-product { width: min(1016px, calc(100% - 56px)); }
  .hero-scene-brand > span, .hero-scene-workspace-foot > span:last-child { display: inline; }
  .hero-scene-workspace-bar { padding-inline: 26px; }
  .hero-scene-order { padding-inline: 28px; }
  .hero-scene-context { padding-inline: 24px; }
  .hero-scene-panel { padding-inline: 30px; }
  .hero-scene-panel-main > p { max-width: 52ch; }
}
@media (min-width: 900px) {
  .hero-scene { padding: 65px 0 30px; border-radius: 30px; }
  .hero-scene-product { margin-top: 44px; width: min(1016px, calc(100% - 110px)); }
  .hero-scene-workspace { border-radius: 16px; }
  .hero-scene-workspace-bar { padding: 21px 30px; }
  .hero-scene-workspace-body { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .hero-scene-order { padding: 31px 54px 28px 34px; }
  .hero-scene-order-heading { margin-bottom: 26px; }
  .hero-scene-order-heading h2 { font-size: 29px; }
  .hero-scene-order-heading p { font-size: 13px; }
  .hero-scene-order-symbol svg { width: 31px; height: 36px; }
  .hero-scene-select-label { font-size: 12px; }
  .hero-scene-control { min-height: 78px; padding: 12px 15px; gap: 13px; }
  .hero-scene-control-copy strong { font-size: 14px; }
  .hero-scene-control-copy > span { font-size: 13px; }
  .hero-scene-control-arrow { display: flex; opacity: 0; }
  .hero-scene-control[aria-selected=true] .hero-scene-control-arrow { opacity: 1; }
  .hero-scene-order-note { margin-top: 24px; font-size: 13px; }
  .hero-scene-order-note br { display: block; }
  .hero-scene-context { padding: 28px 0 28px; margin-right: 0; display: grid; align-items: stretch; }
  .hero-scene-context-connector { display: block; position: absolute; z-index: 1; left: -55px; width: 66px; top: 0; transform: translateY(calc(var(--hero-scene-connection-y, 255px) - 14px)); color: oklch(75.27% 0.0728 299.3); pointer-events: none; transition:transform 220ms var(--hero-scene-ease); }
  .hero-scene-context-connector svg { width: 66px; height: 28px; overflow: visible; }
  .hero-scene-context-connector path { stroke: oklch(70.13% 0.0868 302.4); stroke-width: 1; }
  .hero-scene-context-connector circle { fill: oklch(64.91% 0.1026 300.5); stroke: oklch(93.81% 0.0226 305.6); stroke-width: 3; }
  .hero-scene-panel { position: relative; min-height: 450px; padding: 27px 32px; box-shadow: none; transform: none; transform-origin: 0 50%; }
  .hero-scene-panel-top { font-size: 12px; }
  .hero-scene-panel-main { margin-top: 31px; }
  .hero-scene-panel h3 { font-size: 42px; }
  .hero-scene-panel-main > p { font-size: 15px; max-width: 36ch; }
  .hero-scene-panel-facts dt, .hero-scene-panel-facts dd { font-size: 13px; }
  .hero-scene-panel-facts { margin-top: 22px; }
  .hero-scene-panel-note { font-size: 12px; }
  .hero-scene-workspace-foot { padding: 17px 30px; }
  .hero-scene-caption { font-size: 12px; margin-top: 26px; }
}
@media (max-width: 359px) {
  .hero-scene { margin-inline: 8px; padding-top: 35px; }
  .hero-scene-message { padding-inline: 13px; }
  .hero-scene h1 { font-size: 36px; }
  .hero-scene-description { font-size: 13px; }
  .hero-scene-actions { flex-direction: column; align-items: stretch; padding-inline: 18px; }
  .hero-scene-actions .button { font-size: 13px; }
  .hero-scene-product { width: calc(100% - 16px); }
  .hero-scene-workspace-bar { padding-inline: 14px; }
  .hero-scene-preview-label { max-width: 75px; }
  .hero-scene-order { padding-inline: 14px; }
  .hero-scene-order-heading h2 { font-size: 22px; }
  .hero-scene-control { padding-inline: 11px; gap: 9px; }
  .hero-scene-control-icon svg { width: 18px; height: 18px; }
  .hero-scene-panel { padding-inline: 19px; }
  .hero-scene-panel h3 { font-size: 31px; }
}
@keyframes hero-scene-workspace-arrive { from { transform: translateY(16px); opacity: .82; } to { transform: translateY(0); opacity: 1; } }
@keyframes hero-scene-context-arrive { from { opacity: .82; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes hero-scene-connection-arrive { from { opacity: .3; } to { opacity: 1; } }
.hero-scene-enter .hero-scene-workspace { animation: hero-scene-workspace-arrive 520ms var(--hero-scene-ease) both; }
.hero-scene-enter .hero-scene-context { animation: hero-scene-context-arrive 420ms var(--hero-scene-ease) both; }
.hero-scene-enter .hero-scene-context-connector path { animation: hero-scene-connection-arrive 420ms var(--hero-scene-ease) both; }
@media (prefers-reduced-motion: reduce) {
  .hero-scene *, .hero-scene *::before, .hero-scene *::after { transition:none!important; animation: none !important; }
  .hero-scene-panel { transform: none; }
}
.reduce-motion .hero-scene *, .reduce-motion .hero-scene *::before, .reduce-motion .hero-scene *::after, .hero-scene-static *, .hero-scene-static *::before, .hero-scene-static *::after { animation: none !important; transition:none!important; }
.reduce-motion .hero-scene-panel, .hero-scene-static .hero-scene-panel { transform: none; }
@media print { .hero-scene { background: var(--white); break-inside: avoid; } .hero-scene-atmosphere { display: none; } .hero-scene-workspace, .hero-scene-panel { box-shadow: none; transform: none; } }

/* An aligned operational record, with a compact phone composition. */
.hero-scene { border-radius: 16px; padding-block: 48px 24px; }
.hero-scene-message { width: min(1192px, calc(100% - 40px)); margin-inline: auto; padding: 0; }
.hero-scene h1 { font-size: clamp(39.0625px, 6vw, 76.2939px); line-height: 1.08; }
.hero-scene-description { color: var(--muted); margin-inline: 0; font-size: 16px; max-width: 70ch; }
.hero-scene-actions { justify-content: flex-start; gap: 12px; }
.hero-scene-product { width: min(1192px, calc(100% - 40px)); margin-top: 40px; }
.hero-scene-workspace { box-shadow: 0 20px 48px oklch(23% .033 283 / .09); background: var(--white); }
.hero-scene-order { padding: 24px; }
.hero-scene-context { padding: 0 24px 24px; }
.hero-scene-panel { border-radius: 12px; min-height: 0; padding: 24px; }
.hero-scene-panel h3 { font-size: 31.25px; line-height: 1.15; }
.hero-scene-control { min-height: 60px; padding-inline: 10px; }
.hero-scene-order-note { margin-top: 16px; }
.hero-scene-caption { color: var(--muted); }
@media(min-width:900px) {
 .hero-scene { margin-inline: 24px; padding-block: 64px 28px; }
 .hero-scene-message { display: grid; grid-template-columns: 1.45fr 1fr; column-gap: 64px; align-items: end; }
 .hero-scene h1 { grid-row: 1 / 3; }
 .hero-scene-description { font-size: 17px; margin: 0; align-self: end; }
 .hero-scene-actions { margin-top: 24px; align-self: start; flex-wrap: nowrap; }
 .hero-scene-actions .button { padding-inline: 18px; font-size: 13px; }
 .hero-scene-workspace-body { grid-template-columns: 1fr 1fr; }
 .hero-scene-order { padding: 32px 64px 28px 32px; }
 .hero-scene-context { padding: 24px 24px 24px 0; }
 .hero-scene-panel { min-height: 405px; padding: 28px 32px; }
 .hero-scene-panel h3 { font-size: 39.0625px; }
 .hero-scene-control { min-height: 72px; }
 .hero-scene-panel-main { margin-top: 24px; }
}
@media(max-width:539px) {
 .hero-scene { margin-inline: 8px; padding-top: 32px; }
 .hero-scene-message,.hero-scene-product { width: calc(100% - 32px); }
 .hero-scene-description { font-size: 16px; margin-top: 20px; }
 .hero-scene-description br { display: none; }
 .hero-scene-actions { display: grid; grid-template-columns: 1fr; padding: 0; }
 .hero-scene-actions .button { justify-content: space-between; font-size: 14px; padding-inline: 18px; }
 .hero-scene-product { margin-top: 28px; }
 .hero-scene-workspace-bar { padding: 16px; gap: 8px; }
 .hero-scene-brand strong { font-size: 13px; }
 .hero-scene-preview-label { max-width: 88px; }
 .hero-scene-order { padding: 20px 16px; }
 .hero-scene-order-heading { margin-bottom: 18px; }
 .hero-scene-control-copy { grid-template-columns: 1fr; gap: 2px; }
 .hero-scene-control-icon { display: none; }
 .hero-scene-control { padding: 10px; min-height: 60px; }
 .hero-scene-control-copy strong { font-size: 14px; }
 .hero-scene-context { padding: 0; }
 .hero-scene-panel { border-radius: 0; padding: 24px 20px; }
 .hero-scene-panel-main { margin-top: 20px; }
 .hero-scene-panel-main>p { font-size: 15px; }
 .hero-scene-panel-facts { margin-top: 18px; }
 .hero-scene-workspace-foot { padding: 16px; }
}

/* The opening owns the vibrant iris-to-peach brand field. */
.hero-scene { background: linear-gradient(118deg, oklch(72% .115 285) 0%, oklch(85% .07 300) 52%, oklch(88% .075 30) 100%); }
.hero-scene-description,.hero-scene-caption { color: oklch(32% .045 285); }
.hero-scene-message { text-align: center; }
.hero-scene h1 { font-size: clamp(39.0625px, 6.7vw, 95.3674px); }
.hero-scene-description { margin: 24px auto 0; }
.hero-scene-actions { justify-content: center; }
@media(min-width:900px) {
 .hero-scene-message { display: block; }
 .hero-scene h1 { line-height: 1.04; }
 .hero-scene-description { margin-top: 24px; font-size: 18px; }
 .hero-scene-actions { margin-top: 24px; }
 .hero-scene-actions .button { font-size: 14px; }
}
.hero-scene-enter h1 { animation: hero-copy-arrive 600ms var(--hero-scene-ease) both; }
.hero-scene-enter .hero-scene-description { animation: hero-copy-arrive 520ms 50ms var(--hero-scene-ease) both; }
.hero-scene-enter .hero-scene-actions { animation: hero-copy-arrive 480ms 90ms var(--hero-scene-ease) both; }
.hero-scene-enter .hero-scene-workspace { animation-delay: 120ms; }
@keyframes hero-copy-arrive { from { opacity: .82; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media(max-width:539px) {
 .hero-scene-message { text-align: left; }
 .hero-scene-description { margin-top: 20px; }
 .hero-scene h1 { font-size: clamp(39.0625px, 10.3vw, 48.8281px); }
}