@charset "UTF-8";

/* The same content uses a compact reading layout on phones. */
.mobile-hero-cta,.mobile-swipe-note{display:none}

@media (max-width:680px){
  html{scroll-padding-top:62px}
  .wrap{width:min(100% - 32px,1240px)}
  .site-header .header-inner{min-height:62px}
  .brand-mark{width:32px;height:32px;font-size:1rem}
  .brand strong{font-size:1rem}
  .brand small{font-size:.42rem;letter-spacing:.12em}
  .primary-nav{top:62px}
  .primary-nav.is-open{max-height:calc(100dvh - 62px);overflow-y:auto;overscroll-behavior:contain;padding:10px 16px 18px}
  .primary-nav a{display:flex;align-items:center;min-height:45px;padding:10px 8px;font-size:.92rem;border-bottom:1px solid var(--line)}

  .platform-hero,.platform-hero-grid{min-height:0}
  .platform-hero{background:linear-gradient(160deg,#f6f3eb,#e8e9dc)}
  .platform-hero-grid{grid-template-columns:1fr;gap:0;align-items:start}
  .platform-hero-copy{padding:38px 0 18px}
  .platform-hero .eyebrow{margin-bottom:14px}
  .platform-hero h1{max-width:100%;margin:0 0 17px;font-size:clamp(2.05rem,8.6vw,3rem);line-height:1.28;letter-spacing:-.07em;word-break:keep-all}
  .platform-hero h1 em{display:block}
  .platform-lead{max-width:100%;margin:0 0 19px;font-size:.94rem;line-height:1.72}
  .desktop-hero-cta{display:none}
  .mobile-hero-cta{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:52px;padding:12px 18px;text-align:center}
  .platform-hero .hero-note{max-width:100%;margin:12px 0 0;font-size:.74rem;line-height:1.55}
  .shelf-illustration{width:100%;height:158px;min-height:158px;margin:2px auto 24px;padding:0 30px 34px;gap:7px;border-radius:18px;box-shadow:inset 0 0 0 1px #b6c0ae,0 12px 25px rgba(35,71,54,.09)}
  .shelf-glow{top:0;height:75%;filter:blur(25px)}
  .shelf-head{top:10px;right:14px;left:14px;padding-bottom:5px;font-size:.52rem}
  .shelf-book{width:18%;min-width:0;padding-top:11px;font-size:.72rem}
  .shelf-book.one{height:81px}.shelf-book.two{height:96px}.shelf-book.three{height:76px}.shelf-book.four{height:105px}
  .shelf-book::after{inset:6px 4px}
  .shelf-base{right:6%;bottom:29px;left:6%;height:5px}
  .shelf-caption{right:8px;bottom:8px;left:8px;text-align:center;font-size:.58rem;letter-spacing:0}

  .platform-intro{padding:19px 0}
  .intro-grid{grid-template-columns:1fr;gap:0}
  .intro-title{margin:0 0 7px;font-size:1.1rem;line-height:1.4}
  .intro-title br{display:none}
  .intro-grid>div{display:grid;grid-template-columns:33px 1fr;gap:0 7px;padding:9px 0;border-left:0;border-top:1px solid rgba(255,255,255,.18)}
  .intro-grid span{grid-row:1/3;margin:0;font-size:.8rem}
  .intro-grid strong{font-size:.86rem}
  .intro-grid div p{grid-column:2;margin:1px 0 0;font-size:.74rem}

  .section{padding:52px 0}
  .section-heading{margin-bottom:23px}
  .section-heading h2,.section-lead h2{font-size:clamp(1.95rem,7.7vw,2.55rem);line-height:1.3}
  .catalog-heading{gap:13px;margin-bottom:23px}
  .catalog-heading h2{font-size:clamp(2rem,7.7vw,2.6rem)}
  .catalog-heading>p{margin:0;font-size:.88rem;line-height:1.65}
  .catalog-tools{padding:13px;gap:7px}
  .catalog-tools .search-box input{height:44px}
  .catalog-tools select{height:44px}
  .catalog-tools label[for="catalog-sort"]{grid-column:1/-1;grid-row:4;margin-top:4px}
  .catalog-tools #catalog-sort{grid-column:1/-1;grid-row:5}
  .catalog-meta{margin:12px 0 15px;font-size:.75rem}
  .catalog-grid{grid-template-columns:1fr;gap:11px}
  .catalog-card{display:grid;grid-template-columns:105px minmax(0,1fr)}
  .catalog-cover{min-height:150px;padding:10px 8px}
  .catalog-cover::before{inset:6px}
  .catalog-cover-title{font-size:1.03rem;line-height:1.38}
  .catalog-cover-small,.catalog-cover-line{font-size:.46rem;letter-spacing:.06em}
  .catalog-card-body{padding:10px 12px}
  .catalog-status{margin-bottom:6px}
  .catalog-card h3{margin-bottom:3px;font-size:1.03rem}
  .catalog-byline{margin-bottom:8px}
  .catalog-summary{margin-bottom:9px;font-size:.78rem;line-height:1.55}
  .catalog-scope{margin-bottom:8px}
  .catalog-read{display:inline-flex;align-items:center;min-height:40px}
  .catalog-note{margin-top:25px;padding:18px 14px;gap:12px}
  .catalog-note strong{font-size:1rem}

  .live-demo-layout{gap:22px}
  .live-demo-copy h2{margin-bottom:15px;font-size:clamp(1.72rem,7.4vw,2.25rem);line-height:1.32}
  .live-demo-copy h2 em{white-space:nowrap}
  .live-demo-copy>p:not(.eyebrow){font-size:.9rem;line-height:1.7}
  .live-demo-copy .demo-privacy{margin-top:14px;padding-left:12px;font-size:.78rem}
  .demo-tabs{flex-wrap:nowrap;gap:7px;margin-top:18px;overflow-x:auto;padding:0 0 6px;scrollbar-width:thin}
  .demo-tabs button{flex:0 0 auto;min-height:43px;white-space:nowrap;font-size:.8rem}
  .demo-phone{width:100%;height:auto;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
  .demo-phone-top{display:none}
  .demo-phone-screen{height:auto;overflow:hidden;border:1px solid #b7c6b8;border-radius:14px;box-shadow:0 10px 22px rgba(30,53,40,.08)}
  .demo-pending{min-height:170px;padding:24px 20px}
  .demo-pending strong{font-size:1.13rem}
  .demo-phone iframe{height:min(70dvh,620px);min-height:460px}

  .example-heading{margin-bottom:19px}
  .example-heading h2{font-size:clamp(1.72rem,7.2vw,2.25rem);line-height:1.32}
  .example-heading h2 em{white-space:nowrap}
  .example-heading>p:not(.eyebrow):not(.mobile-swipe-note){font-size:.86rem}
  .mobile-swipe-note{display:block!important;margin-top:9px!important;color:#506958!important;font-size:.78rem!important;font-weight:800}
  .example-scene{margin-bottom:19px;padding:17px 16px;font-size:.92rem}
  .example-gallery{display:flex;gap:13px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:16px;padding:0 16px 12px;margin:0 -16px;scrollbar-width:thin}
  .example-gallery figure{flex:0 0 min(78vw,310px);max-width:none;margin:0;scroll-snap-align:start}
  .example-gallery img{width:100%;height:auto}
  .example-gallery figcaption{font-size:.8rem}

  .engine-layout,.author-layout{gap:19px}
  #engine-title{font-size:clamp(1.72rem,7.1vw,2.25rem);line-height:1.32}
  #engine-title em{white-space:nowrap}
  .engine-heading>p:not(.eyebrow){font-size:.9rem}
  .engine-quote{margin-top:19px;padding:16px 17px;font-size:1rem;line-height:1.7}
  .engine-features{grid-template-columns:1fr;gap:8px}
  .engine-features article{display:grid;grid-template-columns:31px 1fr;gap:0 8px;min-height:0;padding:15px 16px}
  .engine-features span{grid-row:1/3}
  .engine-features h3{margin:0 0 4px;font-size:1rem}
  .engine-features p{grid-column:2;font-size:.78rem}
  .engine-bottom{gap:8px;margin-top:18px;padding-top:18px}
  .engine-bottom strong{font-size:1.05rem}
  .engine-bottom p{font-size:.82rem}
  .author-lead{font-size:.93rem}
  .contact-state{margin-top:19px;padding:17px}
  .author-process li{grid-template-columns:34px 1fr;gap:10px;padding:17px 0}
  .author-process h3{font-size:1.1rem}
  .author-process p{font-size:.8rem}
  .site-footer .footer-grid{gap:20px}
  .uses-card h3{font-size:clamp(.96rem,4.1vw,1.18rem);white-space:nowrap;letter-spacing:-.04em}
  .principles blockquote{margin-bottom:25px;padding-left:17px;font-size:1.2rem}
  .principle-grid{gap:8px}
  .principle-grid article{padding:15px 16px}
  .principle-grid h3{margin-bottom:6px;font-size:1rem}
  .principle-grid p{font-size:.8rem;line-height:1.55}
}

@media (max-width:360px){
  .platform-hero h1{font-size:1.98rem}
  .shelf-illustration{padding-inline:19px}
  .catalog-card{grid-template-columns:92px minmax(0,1fr)}
}