.hero-stage:before {
  left:0;
  right:0
}

@media(min-width:1500px) {
  .hero {
    padding-top:83px
  }
  .hero-stage {
    margin-top:66px
  }
}

@media(max-width:1100px) {
  .shell {
    width:calc(100% - 64px)
  }
  .hero-stage {
    max-width:calc(100% - 40px)
  }

  .plaza-layout {
    gap:45px
  }
  .tool-card {
    padding:24px
  }
  .tour-content {
    grid-template-columns:1fr 1.5fr;
    gap:20px
  }
  .tour-copy h3 {
    font-size:24px
  }
  .trust-section {
    gap:20px
  }
  .trust-intro {
    gap:8px
  }
  .trust-intro h2 {
    font-size:16px
  }
}

@media(max-width:800px) {
  .section-space {
    padding-block:78px
  }
  .shell {
    width:calc(100% - 44px)
  }
  .nav-shell {
    width:calc(100% - 44px);
    height:72px
  }
  .site-header nav {
    gap:18px;
    font-size:11px
  }
  .nav-cta {
    font-size:10px;
    padding:7px 12px
  }
  .wordmark {
    font-size:27px
  }
  .brand-icon {
    width:30px;
    height:30px;
  }
  .hero {
    padding-top:47px
  }
  .hero h1 {
    font-size:63px;
    letter-spacing:-2.8px
  }
  .hero-description {
    font-size:14px
  }

  .hero-stage {
    max-width:calc(100% - 20px);
    margin-top:45px;
    padding:10px 10px 0
  }
  .hero-screen {
    max-height:440px
  }

  .hero-bottom {
    font-size:9px
  }
  .section-heading h2,.center-heading h2,.plaza-copy h2 {
    font-size:32px
  }
  .aside {
    font-size:11px
  }
  .usecase {
    padding-right:20px
  }
  .usecase+.usecase {
    padding-left:20px
  }
  .usecase h3 {
    font-size:15px
  }
  .usecase p {
    font-size:11px
  }
  .tour-content {
    grid-template-columns:1fr;
    padding:30px;
    gap:28px
  }
  .tour-copy {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 25px
  }
  .tour-copy .tiny,.tour-copy h3 {
    grid-column:1
  }
  .tour-copy h3 {
    font-size:27px
  }
  .tour-copy>p {
    grid-column:2;
    grid-row:1 / 3;
    margin-top:0;
    align-self:center
  }
  .tour-copy ul {
    grid-column:1 / -1;
    display:flex;
    flex-wrap:wrap;
    gap:5px 20px;
    margin-top:18px
  }
  .tour-copy small {
    grid-column:1 / -1;
    margin-top:14px
  }
  .tour-visual {
    border-radius:10px
  }

  .mode-grid {
    gap:11px
  }
  .mode-card {
    padding:20px 18px
  }

  .mode-card h3 {
    font-size:17px
  }
  .mode-card p {
    font-size:11px
  }
  .mode-fit strong {
    display:block;
    margin-left:0;
    margin-top:3px
  }

  .plaza-layout {
    grid-template-columns:1fr 1fr;
    gap:30px
  }

  .toolkit-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .tool-wide {
    grid-column:span 2;
    gap:45px
  }
  .toolkit-grid>.tool-card:last-child {
    grid-column:span 2;
    min-height:auto
  }
  .trust-section {
    grid-template-columns:repeat(3,1fr);
    padding-block:30px
  }
  .trust-intro {
    grid-column:1 / -1;
    margin-bottom:5px
  }
  .trust-intro h2 br {
    display:none
  }
  .faq {
    gap:30px;
    grid-template-columns:.9fr 1.3fr
  }
  .faq h2 {
    font-size:27px
  }
  .closing h2 {
    font-size:38px
  }

}

@media(max-width:560px) {
  .shell {
    width:calc(100% - 36px)
  }
  .section-space {
    padding-block:64px
  }
  .nav-shell {
    width:calc(100% - 36px);
    height:66px
  }
  .site-header nav {
    display:none
  }
  .nav-cta {
    font-size:10px
  }
  .hero {
    padding-top:38px
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1.5px
  }
  .hero h1 {
    font-size:48px;
    letter-spacing:-2px;
    margin-top:24px
  }

  .hero-description {
    font-size:12px;
    margin-top:23px
  }
  .hero-actions {
    gap:22px;
    margin-top:24px
  }
  .button {
    font-size:11px;
    gap:20px;
    padding:12px 20px
  }
  .text-link {
    font-size:10px
  }
  .hero-note {
    font-size:8px;
    margin-top:19px
  }
  .hero-stage {
    max-width:100%;
    padding:7px 7px 0;
    border-radius:12px;
    margin-top:33px
  }
  .hero-stage:before {
    inset:-30px -10px 0
  }
  .stage-caption {
    font-size:5px;
    letter-spacing:.5px;
    padding:3px 4px 9px
  }
  .hero-screen {
    border-radius:5px 5px 0 0;
    max-height:none
  }

  .hero-bottom {
    padding-top:34px;
    align-items:center;
    font-size:8px
  }
  .section-heading {
    display:block;
    margin-bottom:29px
  }
  .section-heading h2,.center-heading h2,.plaza-copy h2 {
    font-size:29px;
    letter-spacing:-.8px;
    margin-top:16px
  }
  .aside {
    font-size:11px;
    margin-top:20px
  }
  .aside br {
    display:none
  }
  .usecase-grid {
    grid-template-columns:1fr
  }
  .usecase,.usecase+.usecase,.usecase:last-child {
    padding:24px 0 26px;
    border-left:0;
    position:relative
  }
  .usecase+.usecase {
    border-top:1px solid var(--line)
  }

  .usecase h3 {
    font-size:17px;
    margin-top:8px;
    max-width:100%
  }
  .usecase p {
    max-width:95%;
    font-size:12px
  }
  .tag {
    margin-top:15px
  }
  .tiny {
    font-size:8px
  }
  .tour-tabs {
    padding:0 18px;
    gap:20px;
    justify-content:space-between
  }
  .tour-tabs button {
    font-size:8px;
    padding:18px 0 15px
  }
  .tour-tabs button span {
    font-size:10px;
    margin-left:4px
  }
  .tour-content {
    padding:24px 18px;
    min-height:0;
    gap:23px
  }
  .tour-copy {
    display:block;
    padding:0
  }
  .tour-copy h3 {
    font-size:25px;
    margin-top:13px
  }
  .tour-copy>p {
    font-size:11px;
    margin-top:13px
  }
  .tour-copy ul {
    display:block;
    margin-top:19px;
    font-size:9px
  }
  .tour-copy small {
    font-size:8px;
    margin-top:20px
  }
  .window-bar {
    height:23px;
    padding-inline:9px
  }
  .window-bar>span {
    font-size:6px
  }
  .window-bar i {
    width:4px;
    height:4px
  }

  .center-heading>p:last-child {
    font-size:11px;
    max-width:280px;
    margin:15px auto 0
  }
  .mode-grid {
    grid-template-columns:1fr;
    margin-top:30px;
    gap:15px
  }
  .mode-card {
    padding:23px;
    display:block
  }
  .mode-card>.tiny {
    grid-column:1 / -1
  }

  .mode-card h3 {
    font-size:19px;
    margin-top:18px;
    margin-bottom:11px
  }
  .mode-card h3 span {
    font-size:11px
  }
  .mode-card p {
    font-size:11px
  }
  .mode-fit {
    grid-column:1 / -1;
    margin-top:20px;
    padding-top:13px;
    font-size:9px
  }
  .mode-fit strong {
    display:inline;
    margin-left:10px
  }

  .rhythm-note {
    justify-content:flex-start;
    gap:12px;
    margin-top:24px
  }
  .rhythm-note p {
    font-size:11px
  }
  .rhythm-note small {
    font-size:9px
  }
  .plaza-layout {
    grid-template-columns:1fr;
    gap:35px
  }
  .plaza-copy>p:not(.eyebrow) {
    font-size:12px;
    margin-top:18px
  }
  .feature-list {
    margin-top:24px
  }
  .feature-list li {
    margin-top:18px
  }

  .toolkit-grid {
    grid-template-columns:1fr;
    gap:13px
  }
  .tool-card {
    padding:25px;
    min-height:0
  }
  .tool-wide,.toolkit-grid>.tool-card:last-child {
    grid-column:auto
  }
  .tool-wide {
    display:block;
    position:relative;
    min-height:0
  }

  .skill-preview {
    margin-top:24px;
    max-width:340px
  }
  .tool-label {
    margin-bottom:20px
  }
  .tool-card h3 {
    font-size:17px
  }
  .tool-card p {
    font-size:11px
  }
  .tool-card .text-link {
    font-size:10px;
    margin-top:17px
  }
  .tool-small,.provider-tags,.format-tag {
    margin-top:18px
  }
  .trust-section {
    grid-template-columns:1fr;
    gap:24px;
    padding-block:28px
  }
  .trust-intro {
    grid-column:auto
  }
  .trust-intro h2 {
    font-size:18px
  }
  .trust-section>div:not(.trust-intro) {
    padding-left:0
  }
  .trust-section h3 {
    font-size:12px;
    margin-bottom:5px
  }
  .trust-section p {
    font-size:11px
  }
  .faq {
    grid-template-columns:1fr;
    gap:27px
  }
  .faq h2 {
    font-size:29px
  }
  .faq h2 br {
    display:none
  }
  .faq-list summary {
    font-size:12px;
    gap:15px;
    padding-block:20px
  }
  .faq-list details p {
    font-size:11px
  }
  .closing {
    width:calc(100% - 36px);
    padding:50px 22px 38px;
    border-radius:18px
  }
  .closing .eyebrow {
    font-size:6px;
    letter-spacing:1px
  }
  .closing h2 {
    font-size:32px;
    letter-spacing:-1px;
    margin-top:24px
  }
  .closing>p:not(.eyebrow) {
    font-size:12px
  }

  .closing small {
    font-size:7px;
    margin-top:22px
  }
  .site-footer {
    gap:18px;
    padding-top:40px;
    padding-bottom:23px
  }
  .site-footer .wordmark {
    font-size:24px
  }
  .site-footer>span {
    font-size:9px
  }
  .site-footer>a:last-of-type {
    font-size:9px
  }
  .site-footer>p {
    font-size:6px;
    letter-spacing:.7px;
    margin-top:1px;
    padding-top:19px
  }
  .dialog-toolbar {
    padding:10px 12px;
    gap:10px
  }
  .dialog-toolbar p {
    font-size:10px
  }
  .dialog-toolbar button {
    font-size:9px;
    padding:5px 10px
  }
  #image-dialog {
    max-width:96vw;
    width:96vw;
    border-radius:10px
  }
}

@media(max-width:1100px) {
  .concept-sheet {
    width:157px
  }
  .choice-sheet {
    width:120px
  }
  .depth-sheet {
    width:185px
  }
}
@media(max-width:800px) and (min-width:561px) {
  .concept-art {
    height:150px
  }
  .concept-sheet {
    width:133px;
    padding:12px
  }
  .concept-art strong {
    font-size:11px
  }
  .choice-sheet {
    width:96px;
    padding:13px 8px
  }
  .choice-sheet strong {
    font-size:17px
  }
  .depth-sheet {
    width:145px;
    gap:9px;
    padding:8px 10px
  }
  .depth-sheet em {
    display:none
  }
  .rhythm-study {
    gap:4px
  }
  .rhythm-study small {
    font-size:8px
  }
  .guided-study>div {
    gap:5px
  }
  .guided-study .role-token:not(.host-token) {
    display:none
  }
}
@media(max-width:560px) {
  .button {
    padding:9px 10px 9px 18px;
    gap:17px
  }
  .nav-cta {
    gap:5px
  }
  .nav-cta .orb {
    width:17px;
    height:17px
  }
  .concept-art {
    height:150px;
    margin:5px 0 18px
  }
  .concept-sheet {
    width:174px
  }
  .choice-sheet {
    width:137px
  }
  .depth-sheet {
    width:218px
  }
  .rhythm-study {
    max-width:310px;
    margin-inline:auto;
    min-height:139px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation-duration:.01ms!important;
    animation-delay:0ms!important;
    transition-duration:.01ms!important
  }
  .js-ready .reveal {
    opacity:1;
    transform:none
  }
}