/* The phone version (2026-10-19). Loaded only on screens up to 760 px wide (media attribute on the <link>), after
   every other stylesheet, so a computer never reads it.
   On a phone each part keeps its picture or 3D, its title, at most one short line and its action. The explanations
   that read well beside a picture on a wide screen are left to the computer and to the product pages. Type and spacing
   are a size smaller, so each part fits its screen. */

/* ---------- the scale: compact type, tighter blocks ---------- */
.intro { padding-top: 64px; }
.intro__title { font-size: 26px; }
.intro__lead { display: none; }

/* ---------- home: Dynamics ---------- */
.dyn__title { font-size: 34px; }
.dyn__lead { font-size: 14px; line-height: 1.55; }
.dyn__link { margin-top: 18px; font-size: 15px; }
.dyn-about { padding-bottom: 56px; }
.dyn-about__grid { gap: 0; }
.dyn-about__col--idea p, .dyn-about__rule, .dyn-about__col:not(.dyn-about__col--idea) { display: none; }
.dyn-about__say { font-size: 22px; margin-inline: auto; text-align: center; }
.dyn-about__go { margin-top: 24px; }

/* ---------- home: Austrors ---------- */
.aus__title { font-size: 34px; }
.aus__lead { font-size: 14px; line-height: 1.5; }
.aus__body { margin-top: 48px; }
.aus__say { font-size: 22px; }
.aus__head p, .aus__steps p, .aus__note { display: none; }
.aus__scope { margin-top: 8px; }
.aus__steps { display: flex; justify-content: space-between; margin-top: 8px; border-top: 1px solid rgb(234 241 244 / 0.14); border-bottom: 1px solid rgb(234 241 244 / 0.14); }
.aus__steps li, .aus__steps li:last-child { display: block; padding: 16px 0; border: 0; }
.aus__steps h5 { font-size: 18px; }
.aus__go { margin-top: 28px; }

/* ---------- home: Jyrex ---------- */
.jx { padding-bottom: 40px; }
.jx__name { font-size: 46px; }
.jx__by { margin-top: 12px; font-size: 16px; }
.jx__lead { display: none; }
.jx__when { margin-top: 14px; font-size: 13px; }
.jx__acts { margin-top: 22px; gap: 10px 20px; }
.jx__more { margin-top: 56px; }
.jx__say { font-size: 20px; }
.jx__fields { display: flex; justify-content: center; gap: 0; margin-top: 24px; text-align: center; }
.jx__fields li, .jx__fields li + li { padding: 0 14px; border: 0; }
.jx__fields li + li { border-left: 1px solid rgb(234 241 244 / 0.16); }
.jx__fields h5 { font-size: 14px; }
.jx__fields p, .jx__note { display: none; }

/* the films driven by the scroll (home chip, Austrors nebula): just the name of each step */
.jxb__step p { display: none; }
.jxb__step h3, .jxb__step h4 { font-size: 20px; }
.jxgo { padding-block: 32px 40px; }
.jxgo__btn { height: 50px; padding: 0 26px; font-size: 15px; }

/* ---------- home: how Justyear works ---------- */
.hw { padding-top: 32px; padding-bottom: 40px; }
.hw__grid { margin-top: 20px; }
.hw__fig, .hw__fact { display: none; }
.hw__item { padding: 22px 0; }
.hw__say { font-size: 20px; }
.hw__why { margin-top: 6px; font-size: 14px; line-height: 1.55; }

/* ---------- home: what is being made ---------- */
.stand { padding-block: 40px; }
.stand__grid { margin-top: 20px; }
.stand__item { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; column-gap: 14px; padding: 16px 0; }
.stand__item--next, .stand__what { display: none; }
.stand__icon { grid-row: 1 / span 2; width: 40px; height: 40px; margin: 0; }
.stand__state { grid-column: 2; grid-row: 1; margin: 0; font-size: 12px; }
.stand__name { grid-column: 2; grid-row: 2; margin: 0; font-size: 18px; }
.stand__go { grid-column: 3; grid-row: 1 / span 2; margin: 0; font-size: 13px; }

/* ---------- footer: the logo, the products, the company ---------- */
.foot { padding-block: 40px 24px; }
.foot__top { padding-bottom: 24px; }
.foot__logo img { height: 26px; }
.foot__line { display: none; }
.foot__grid { grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 24px; }
.foot__grid > :nth-child(n+3) { display: none; }
.foot li { margin: 8px 0; font-size: 14px; }
.foot__prod img { width: 24px; height: 24px; }
.foot__base { margin-top: 28px; padding-top: 16px; gap: 6px 20px; font-size: 12px; }

/* ---------- Austrors page ---------- */
.ap-hero__title { font-size: 42px; }
.ap-hero__lead { font-size: 14px; line-height: 1.5; }
.as__title { font-size: 26px; }
.as__lead, .as__sheet, .as__hint { display: none; }
.ap-end { padding-block: 56px 32px; }
.ap-end__icon { width: 72px; height: 72px; }
.ap-end__title { font-size: 24px; }
.ap-end__lead { display: none; }
.ap-end__acts { margin-top: 24px; }

/* ---------- Dynamics page ---------- */
.dh__title { font-size: 42px; }
.dh__lead { font-size: 14px; line-height: 1.5; }
.gr__title { font-size: 32px; }
.gr__lead, .gr__hint { display: none; }
.sp__lead, .sp__desc { display: none; }
.sp__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.sp__name { font-size: 15px; }
.ws__lead, .ws__sheet { display: none; }
.ws__title { font-size: 28px; }
.ws__groups { grid-template-columns: 1fr 1fr; gap: 20px; }
.ws__list li { font-size: 15px; }

/* ---------- the 3D stages (Jyrex and About pages): the title and the first line only ---------- */
.jyo__text { padding-top: 64px; padding-bottom: 32px; }
.jyo__title { font-size: 30px; margin-bottom: 10px; }
.jyo__when { font-size: 12px; margin-bottom: 8px; }
.jyo__body { font-size: 14px; line-height: 1.55; }
.jyo__body + .jyo__body { display: none; }
.jyo__acts { margin-top: 16px; }
.jyp__title { font-size: 46px; }
.jyp__lead { font-size: 14px; line-height: 1.5; }
.jmq__title { font-size: 24px; }
.jyo__steps li { font-size: 0; }              /* each step of the card: its name only */
.jyo__steps li b { font-size: 16px; }
.sb__title { font-size: 38px; }

/* ---------- About page: the products ---------- */
.sb-what { padding-block: 64px; }
.sb-what__title { font-size: 28px; margin-bottom: 24px; }
.sb-what__list li { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; column-gap: 14px; padding: 16px 0; }
.sb-what__icon { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 10px; }
.sb-what__icon--px { border-radius: 0; }
.sb-what__name { grid-column: 2; grid-row: 1; margin: 0; font-size: 18px; }
.sb-what__line { display: none; }
.sb-what__list .status { grid-column: 2; grid-row: 2; font-size: 12px; }
.sb-what__list .dyn__link { grid-column: 3; grid-row: 1 / span 2; margin: 0; font-size: 13px; }
.jyo--fim .jyo__title { font-size: 28px; }

/* the films the scroll drives are shorter on a phone: the same steps, less thumb travel */
.jxb { height: 460vh; }
.jyo--placa { height: 460svh; }

/* Dynamics page: the three screens */
.lv { padding-block: 56px; }
.lv__title { font-size: 28px; margin-bottom: 20px; }
.lv__what { display: none; }
.lv__name { margin-top: 10px; font-size: 16px; }

.foot__ph { width: 24px; height: 24px; }
.stand__item--next { display: grid; }
.stand__icon--next { width: 40px; height: 40px; margin: 0; }

/* ---------- one rhythm for every page (2026-10-20) ----------
   section titles at one size, body at 14 px, the same 56 px between parts, so the page reads as one piece */
.hw__title, .stand__title { font-size: 24px; font-weight: 300; letter-spacing: -0.03em; color: var(--ice); }
.intro { padding-top: 48px; }
.intro__title { font-size: 24px; }
.dyn { padding-block: 48px 40px; }
.aus { padding-bottom: 56px; }
.aus__body { margin-top: 40px; }
.jx { padding-top: 40px; }
.hw { padding-block: 48px 40px; }
.stand { padding-block: 48px; }
.as { padding-block: 56px 40px; }
.as__title { font-size: 24px; }
.ws { padding-block: 56px 40px; }
.ws__title { font-size: 24px; }
.lv__title, .sb-what__title, .jra__title { font-size: 24px; }
.jra { padding-block: 64px; }
.jra__path li { font-size: 15px; }
.jra__lead { font-size: 14px; }
.ap-end { padding-block: 48px 32px; }
.close-home { padding-block: 64px; }
.close-home__title { font-size: 28px; }

/* words over the 3D stages: the same small block on every stage */
.jyo__title, .jyo--fim .jyo__title { font-size: 26px; }
.jyo__when { font-size: 12px; }
.jmq__title { font-size: 22px; }
.sb__title, .jyp__title { font-size: 40px; }
.jyp__lead, .dh__lead, .ap-hero__lead { font-size: 14px; }
.dh__title, .ap-hero__title { font-size: 36px; }
.gr__title { font-size: 26px; }

/* buttons and links: one compact size */
.btn { height: 44px; padding: 0 20px; font-size: 14px; }
.jxgo__btn { height: 46px; }
.dyn__link, .stand__go { font-size: 14px; }

/* the films' captions: name only, a little smaller */
.jxb__step h3, .jxb__step h4 { font-size: 18px; }