@charset "UTF-8";
/* Readable type scale and balanced space for the artistic site. */
:root {
  --section-space: 96px;
  --column-space: clamp(32px, 6vw, 80px);
  --heading-space: 40px;
  --copy-size: 1.111111rem;
  --small-size: 1rem;
}

h1, h2 { letter-spacing: -.035em; text-wrap: balance; }
h2 { font-size: clamp(2rem, 3.25vw, 3rem); line-height: 1.3; }
h3 { line-height: 1.35; letter-spacing: -.025em; }
/* The rotating decorative orbit and diagonal ribbon stay inside the page canvas. */
body > main { overflow-x: clip; }
.eyebrow { margin-bottom: 18px; line-height: 1.5; }
.site-header { padding-inline: 5%; }
.hero { min-height: clamp(760px, 61vw, 920px); }
.hero-copy { padding-top: clamp(52px, 5.6vw, 92px); }
.hero-copy h1 { font-size: clamp(3rem, 5.2vw, 4.8rem); line-height: 1.25; letter-spacing: -.025em; }
.hero-copy h1 em { margin-top: 0; }
.hero-copy p { margin-top: 28px; line-height: 1.75; }
.round-action { margin-top: 28px; }
.hero-bottom { margin-top: 32px; }

.intro-section, .service-section, .journey-section, .web-spotlight,
.price-intro, .contact-section { padding-block: var(--section-space); }
.intro-section { padding-top: calc(var(--section-space) + 16px); }
.intro-grid, .service-explorer, .web-spotlight-grid, .price-intro,
.contact-grid, .product-poster, .perspective, .web-intro, .web-delivery {
  column-gap: var(--column-space);
}
.intro-copy { font-size: 1.06rem; line-height: 1.75; }
.section-heading, .sectionhead { gap: 28px; margin-bottom: var(--heading-space); }
.section-heading > p, .sectionhead > p { line-height: 1.75; }
.benefit-words { margin-top: 26px; }
.service-menu { padding-top: 0; }
.service-choice { padding-block: 21px; }
.service-choice strong { font-size: clamp(1.35rem, 2.15vw, 1.85rem); line-height: 1.3; }
.service-choice small { margin-top: 5px; line-height: 1.5; }
.service-stage { padding: 32px; }
.stage-top { margin-bottom: 20px; }
.service-stage h3 { font-size: clamp(1.6rem, 2.5vw, 1.85rem); line-height: 1.35; }
.stage-flow { margin-block: 24px; }
.stage-role { padding-block: 18px; }
.journey-canvas { padding-block: 20px 36px; }
.journey-node strong { line-height: 1.3; }
.web-spotlight p, .contact-grid p { margin-top: 24px; }
.contact-grid h2 { font-size: clamp(2rem, 3.25vw, 3rem); }
.registration-info { margin-top: 40px; }
.light-action, .primary { align-items: center; padding: 13px 24px; line-height: 1.5; }
.actions { gap: 20px 28px; margin-top: 28px; }
.actions .textlink { margin-top: 0; }

.product-hero { padding-block: 56px 64px; }
.product-poster h1 { font-size: clamp(2.8rem, 4.6vw, 4.4rem); line-height: 1.3; }
.product-poster > div > p { margin-top: 24px; }
.product-stage { padding-block: 56px var(--section-space); }
.view-tabs { margin-bottom: 48px; }
.perspective { padding-bottom: 40px; }
.perspective h2 { font-size: clamp(2rem, 3.25vw, 3rem); line-height: 1.3; }
.perspective p { margin-top: 20px; }
.architecture-heading { margin-bottom: var(--heading-space); }
.architecture-heading h2, .pricing h2 { font-size: clamp(2rem, 3.25vw, 3rem); line-height: 1.3; }
.pricing-overview, .web-intro { padding-block: 56px var(--section-space); }
.pricing-overview h1, .web-intro h1 { font-size: clamp(2.8rem, 4.6vw, 4.4rem); line-height: 1.3; }
.web-demo-section, .web-connect, .web-pricing,
#web-content, .web-delivery, .web-start { padding-block: var(--section-space); }

@media (max-width: 1100px) and (min-width: 851px) {
  :root { --section-space: 80px; --column-space: 36px; }
  .hero { min-height: 740px; }
  .hero-copy h1 { font-size: 5.4vw; }
  .service-stage { padding: 26px; }
}

@media (max-width: 850px) {
  :root { --section-space: 64px; --heading-space: 32px; --column-space: 32px; }
  .hero { min-height: auto; }
  .hero-copy { padding-top: 40px; }
  .hero-copy h1 { font-size: clamp(2.2rem, 6.4vw, 3.2rem); line-height: 1.28; }
  .hero-copy p { margin-top: 24px; }
  .hero-copy .round-action { margin-top: 24px; }
  .hero-bottom { margin-top: 0; }
  .intro-grid, .service-explorer, .web-spotlight-grid, .price-intro,
  .perspective, .web-intro, .web-delivery { row-gap: 32px; }
  .section-heading, .sectionhead { gap: 20px; }
  .service-choice { padding-block: 15px; }
  .service-choice strong { font-size: 1.18rem; }
  .service-stage { padding: 28px; }
  .entry-art { padding-block: 40px; }
  .product-hero, .pricing-overview, .web-intro { padding-top: 40px; }
  .product-hero { padding-bottom: 40px; }
  .product-poster h1, .pricing-overview h1, .web-intro h1 {
    font-size: clamp(2.2rem, 6.4vw, 3.2rem); line-height: 1.3;
  }
  .product-stage { padding-top: 40px; }
  .view-tabs { margin-bottom: 36px; }
  .perspective { padding-bottom: 32px; }
}

@media (max-width: 560px) {
  .hero-copy h1, .product-poster h1, .pricing-overview h1, .web-intro h1 {
    font-size: clamp(2rem, 9.2vw, 2.1rem); line-height: 1.3; letter-spacing: -.025em;
  }
  h2, .intro-section h2, .contact-grid h2, .perspective h2,
  .architecture-heading h2, .pricing h2 {
    font-size: clamp(1.6rem, 7.8vw, 1.78rem); line-height: 1.35; letter-spacing: -.025em;
  }
  .hero-copy { padding-top: 36px; }
  .hero-copy p { line-height: 1.75; text-wrap: balance; }
  .hero-copy p br { display: none; }
  .service-stage { padding: 26px 22px; }
  .service-stage h3 { font-size: 1.6rem; line-height: 1.4; }
  .stage-flow { margin-block: 22px; }
  .journey-canvas { padding-top: 12px; }
  .journey-node { min-height: 184px; }
  .contact-grid { row-gap: 36px; }
  .registration-info { margin-top: 32px; }
  .actions { gap: 16px 24px; }
  .art-footer { padding-top: 40px; }
}

/* Supporting copy has its own readable floor; it is no longer miniature type. */
body, p, .hero-copy p, .intro-copy, .intro-copy p, .stage-role p,
.perspective p, .screen-row, .demo-result, .demo-result p, .architecture-node p,
.web-principle p, .web-principle li, .mini-description, .website-path p,
.web-system-links span, .registration-info dl > div {
  font-size: var(--copy-size); line-height: 1.7;
}
.fineprint, .scope, .eyebrow, .brand small, .site-header nav,
.hero-topline, .hero-label, .hero-label span, .hero-bottom, .hero-bottom p,
.hero-bottom > a, .benefit-words span, .service-choice small,
.stage-top, .stage-flow span, .stage-flow strong, .stage-role > span,
.journey-node > span, .journey-branches > a span, .entry-art > a span,
.contact-qr > span, .registration-info summary, .registration-info p,
.footer-bottom, .footer-bottom p, .footer-bottom .scope, .motion-control,
.crumb, .product-siblings, .product-siblings a, .view-tabs button,
.screen-chrome, .screen-eyebrow, .architecture-node > span, .module-list span,
.architecture-base small, .product-disclosure, .pricing-status, .pricing-note,
.pricebadge, .extra-prices span, .web-principle > span, .frame-chrome,
.mini-role-name, .mini-kicker, .mini-modules span, .web-demo-note,
.web-scope-note, .web-reference, .web-content-rows article > span,
.website-path > div small, .web-role-tabs button, .device-options button {
  font-size: var(--small-size); line-height: 1.6;
}
.hero-bottom { gap: 24px; }
.hero-bottom p { max-width: 270px; }
.brand small { letter-spacing: .025em; }
.hero-label { padding: 9px 16px; gap: 8px; }
.crumb { flex-wrap: wrap; gap: 6px 10px; }
.screen-chrome, .stage-top, .frame-chrome { flex-wrap: wrap; }
.demo-action, .primary, .light-action, .underlined-link { font-size: var(--copy-size); }
.service-choice small { color: var(--ink); }
.motion-control { padding: 10px 16px; }
.footer-brand { font-size: clamp(2.2rem, 4.1vw, 3.4rem); letter-spacing: -.04em; padding-bottom: 28px; }
.footer-brand > span { font-size: .8em; }
.hero-art { width: 55%; right: -1%; top: 84px; }
.hero-art img {
  animation: stage-breathe 12s ease-in-out infinite;
  mask-image: radial-gradient(ellipse 69% 68% at 50% 52%, #000 66%, transparent 100%);
}
@keyframes stage-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media (max-width: 850px) {
  .site-header { gap: 12px; }
  .hero-copy .round-action { font-size: var(--small-size); width: 116px; height: 116px; }
  .hero-bottom { flex-wrap: wrap; row-gap: 16px; }
  .service-choice { flex-basis: 215px; }
  .stage-flow { align-items: stretch; }
  .stage-flow > b { align-self: center; }
  .hero-art { position: relative; width: 105%; right: auto; top: auto; margin: -12px -2.5% 0; }
}

@media (max-width: 560px) {
  .site-header { padding: 16px 5%; }
  .brand { gap: 8px; }
  .brand-symbol { font-size: 32px; }
  .brand small { letter-spacing: 0; }
  .menu-toggle { font-size: 18px; padding: 7px 10px; line-height: 1.5; flex-shrink: 0; }
  .hero-topline { letter-spacing: 0; }
  .hero-topline > span:first-child { text-wrap: balance; }
  .hero-copy p { text-wrap: pretty; }
  .hero-label { font-size: 18px; padding: 7px 12px; }
  .hero-art { width: 108%; margin-inline: -4%; }
  .hero-label span { display: none; }
  .hero-bottom p { max-width: none; }
  .service-stage h3, .screen-body h3, .architecture-node h3, .bundle h3,
  .web-content-rows article h3, .website-path > div h3, .mini-title {
    font-size: 1.4rem; line-height: 1.4;
  }
  .journey-node strong { font-size: 1.45rem; }
  .service-stage { padding-inline: 20px; }
  .stage-flow { gap: 8px; }
  .stage-flow > div { padding: 14px 9px; border-radius: 20px; }
  .entry-art > a { gap: 12px; padding-inline: 20px; }
  .entry-art > a span { flex-shrink: 0; }
  .contact-qr { width: 260px; }
  .contact-qr > span { text-align: center; }
  .view-tabs button { padding-inline: 8px; }
  .footer-brand { font-size: 1.8rem; padding-bottom: 24px; }
  .registration-info dl > div { grid-template-columns: 1fr; gap: 4px; }
}