/* ============================================================
   CAERSYN — RESPONSIVE REFLOW LAYER
   Keeps the established design intact while allowing narrow and
   enlarged layouts to reflow without widening the whole document.
============================================================ */

@media screen and (max-width:640px){
  html,
  body{
    min-width:0;
    max-width:100%;
  }

  body{
    overflow-wrap:break-word;
  }

  .header,
  .logo,
  .hero-inner,
  .shell,
  .page,
  .body,
  .inner,
  .grid-2,
  .split-head,
  .problem-grid,
  .apply-grid,
  .features,
  .cards,
  .flow,
  .flow-row,
  .pilot-frame,
  .records-grid,
  .cases-grid,
  .publication-section,
  .publication-introduction,
  .note-main,
  .paper-main,
  .read-main,
  .pdf-info,
  .form,
  .form-field,
  .cx-brand,
  .cx-brand-text,
  .cx-item > *{
    min-width:0;
  }

  img,
  svg,
  canvas,
  video,
  object,
  embed,
  iframe{
    max-width:100%;
  }

  h1,
  h2,
  h3,
  h4,
  p,
  li,
  dd,
  figcaption,
  .breadcrumbs,
  .subtitle,
  .hero-sub,
  .lede,
  .step-title,
  .step-desc,
  .card h3,
  .card p,
  .feature h3,
  .feature p,
  .note-title,
  .note-desc,
  .paper-title,
  .paper-desc,
  .read-title,
  .read-meta,
  .pdf-title,
  .pdf-meta,
  .cx-title,
  .cx-desc{
    overflow-wrap:anywhere;
    hyphens:auto;
  }

  .wordmark{
    max-width:100%;
    flex-wrap:wrap;
  }

  .wordmark .word{
    flex:0 0 100%;
    width:100%;
    justify-content:center;
  }

  .wordmark .sp{
    display:none;
  }

  .tagline{
    max-width:100%;
    white-space:normal;
    flex-wrap:wrap;
    text-align:center;
  }

  .tagline::before,
  .tagline::after{
    display:none;
  }

  .kicker,
  .hero-kicker,
  .code{
    min-width:0;
    max-width:100%;
    flex-wrap:wrap;
  }

  .btn,
  .nav a,
  .mnav a,
  .footer-links a,
  .note-link,
  .paper-link,
  .paper-tag,
  .read-link,
  .cx-tag{
    overflow-wrap:anywhere;
  }

  .note-link,
  .paper-link,
  .paper-tag,
  .read-link{
    white-space:normal;
  }

  .publication-meta div{
    min-width:0;
    max-width:100%;
    flex-wrap:wrap;
    justify-content:center;
    text-align:center;
  }

  input,
  select,
  textarea,
  button{
    min-width:0;
    max-width:100%;
  }

  .cx-panel{
    max-width:100vw;
  }

  .cx-item{
    min-width:0;
  }

  /* Halve the established inter-section rhythm on phone layouts. */
  .sec > .shell.pad{
    padding-top:clamp(55px,8vh,95px);
  }
}

@media screen and (max-width:360px){
  .header{
    gap:10px;
    padding:16px 14px;
  }

  .logo{
    gap:9px;
  }

  .logo b{
    max-width:112px;
    font-size:13px;
    letter-spacing:.18em;
  }

  .burger{
    flex:none;
    font-size:10px;
    letter-spacing:.16em;
  }

  .mnav{
    padding-right:16px;
    padding-left:16px;
  }

  .mnav a{
    font-size:clamp(24px,9vw,32px);
    line-height:1.15;
  }

  .mnav-close{
    top:18px;
    right:16px;
    letter-spacing:.16em;
  }

  .loader{
    padding-right:14px;
    padding-left:14px;
  }

  .loader-word{
    max-width:100%;
    flex-wrap:wrap;
    justify-content:center;
    padding:0;
    font-size:clamp(18px,8vw,26px);
    letter-spacing:.22em;
    text-indent:0;
  }

  .loader-line{
    width:calc(100vw - 28px);
    max-width:200px;
  }

  .hero-core{
    padding-right:12px;
    padding-left:12px;
  }

  .hero-inner{
    width:100%;
  }

  .wordmark{
    font-size:clamp(20px,10.5vw,34px);
    line-height:1.14;
    letter-spacing:.025em;
    text-indent:0;
  }

  .tagline{
    padding:0;
    font-size:10px;
    line-height:1.7;
    letter-spacing:.18em;
    text-indent:0;
  }

  .hero-kicker{
    max-width:100%;
    font-size:9.5px;
    line-height:1.55;
    letter-spacing:.17em;
    text-indent:0;
  }

  .hero-meta,
  .scroll-hint{
    display:none;
  }

  .shell,
  .page,
  .main,
  body > main:not(.main):not(.page){
    padding-right:14px;
    padding-left:14px;
  }

  .page h1,
  body > main:not(.main):not(.page) h1{
    max-width:100%;
    font-size:clamp(23px,9vw,34px);
    line-height:1.12;
    letter-spacing:.015em;
    text-wrap:wrap;
  }

  .page .subtitle{
    max-width:100%;
    font-size:clamp(18px,7vw,23px);
  }

  .body h2{
    font-size:clamp(22px,8vw,28px);
  }

  .body h3{
    font-size:clamp(19px,7vw,24px);
  }

  .breadcrumbs{
    gap:6px;
    font-size:9.5px;
    line-height:1.55;
    letter-spacing:.08em;
  }

  .publication-meta div{
    gap:4px;
    font-size:10.5px;
    line-height:1.5;
    letter-spacing:.08em;
  }

  .card,
  .feature{
    padding:22px 18px;
  }

  .step{
    grid-template-columns:32px minmax(0,1fr);
    gap:12px;
  }

  .cta-row,
  .hero-ctas,
  .download,
  .ctas{
    flex-direction:column;
    align-items:stretch;
  }

  .btn{
    width:100%;
    justify-content:center;
    padding:16px 12px;
    white-space:normal;
    text-align:center;
    line-height:1.4;
    letter-spacing:.16em;
  }

  .footer-in{
    align-items:flex-start;
  }

  .footer-links{
    gap:14px 16px;
  }

  .cx-panel{
    width:100vw;
  }

  .cx-head{
    gap:10px;
    padding:16px 14px 14px;
  }

  .cx-body{
    padding:16px 14px 26px;
  }

  .cx-item{
    grid-template-columns:minmax(0,1fr);
    gap:7px;
  }

  .cx-tag{
    white-space:normal;
    padding-top:0;
  }
}

@media screen and (max-width:240px){
  .header{
    padding-right:12px;
    padding-left:12px;
  }

  .logo b,
  .cx-brand-text{
    display:none;
  }

  .mnav{
    padding-right:12px;
    padding-left:12px;
  }

  .mnav a{
    font-size:22px;
  }

  .mnav-close{
    right:12px;
  }

  .shell,
  .page,
  .main,
  body > main:not(.main):not(.page){
    padding-right:12px;
    padding-left:12px;
  }

  .kicker,
  .doc-label,
  .eyebrow{
    letter-spacing:.14em;
    text-indent:0;
  }

  .kicker::before,
  .kicker::after,
  .hero-kicker::before{
    width:18px;
    flex-basis:18px;
  }

  .publication-meta div{
    flex-direction:column;
    align-items:center;
  }

  .btn{
    padding-right:10px;
    padding-left:10px;
    font-size:10px;
    letter-spacing:.12em;
  }

  .footer{
    padding-right:12px;
    padding-left:12px;
  }

  .footer small,
  .footer-links a{
    letter-spacing:.14em;
  }

  .cx-close{
    padding:9px 8px!important;
    letter-spacing:.14em!important;
  }
}

/* ============================================================
   CAERSYN — RESPONSIVE READING SCALE
   The controls change actual text metrics so content reflows.
============================================================ */

.caersyn-responsive-actions{
  display:none;
  margin-left:auto;
  align-items:center;
  gap:12px;
}

.caersyn-text-tools{
  position:relative;
  flex:none;
}

.caersyn-text-trigger,
.caersyn-text-step{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid var(--hair,rgba(241,237,228,.14));
  border-radius:0;
  background:rgba(10,10,11,.82);
  color:var(--txt,#f1ede4);
  font-family:var(--mono,'JetBrains Mono',ui-monospace,monospace);
  cursor:pointer;
}

.caersyn-text-trigger{
  width:44px;
  height:44px;
  padding:0;
  font-size:13px;
  font-weight:500;
  letter-spacing:.04em;
}

.caersyn-text-trigger:hover,
.caersyn-text-trigger[aria-expanded="true"],
.caersyn-text-step:hover:not(:disabled){
  border-color:var(--blue-line,rgba(169,201,255,.45));
  color:var(--blue,#a9c9ff);
}

.caersyn-text-trigger:focus-visible,
.caersyn-text-step:focus-visible{
  outline:1.5px solid var(--blue,#a9c9ff);
  outline-offset:3px;
}

.caersyn-text-panel{
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  z-index:210;
  width:min(270px,calc(100vw - 28px));
  padding:16px;
  border:1px solid var(--hair,rgba(241,237,228,.14));
  background:rgba(10,10,11,.97);
  box-shadow:0 18px 50px rgba(0,0,0,.4);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.caersyn-text-panel[hidden]{
  display:none!important;
}

.caersyn-text-panel-label{
  display:block;
  margin-bottom:12px;
  color:var(--mut,#908c82);
  font-family:var(--mono,'JetBrains Mono',ui-monospace,monospace);
  font-size:10px;
  line-height:1.4;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.caersyn-text-controls{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 44px;
  align-items:center;
  gap:8px;
}

.caersyn-text-step{
  width:44px;
  height:44px;
  padding:0;
  font-size:13px;
  font-weight:500;
}

.caersyn-text-step:disabled{
  cursor:default;
  color:var(--mut,#908c82);
  opacity:.38;
}

.caersyn-text-status{
  min-width:0;
  color:var(--txt,#f1ede4);
  font-family:var(--sans,Archivo,system-ui,sans-serif);
  font-size:13px;
  line-height:1.25;
  text-align:center;
}

@media screen and (max-width:860px){
  :root{
    --caersyn-reading-size:17px;
    --caersyn-reading-leading:1.76;
    --caersyn-support-size:16px;
    --caersyn-support-leading:1.68;
    --caersyn-label-size:11px;
    --caersyn-card-title-size:24px;
    --caersyn-navigation-title-size:18px;
    --caersyn-article-h2-size:28px;
    --caersyn-article-h3-size:23px;
    --caersyn-article-h4-size:19px;
  }

  html[data-caersyn-text-size="large"]{
    --caersyn-reading-size:20px;
    --caersyn-reading-leading:1.68;
    --caersyn-support-size:18px;
    --caersyn-support-leading:1.62;
    --caersyn-label-size:12px;
    --caersyn-card-title-size:28px;
    --caersyn-navigation-title-size:21px;
    --caersyn-article-h2-size:32px;
    --caersyn-article-h3-size:27px;
    --caersyn-article-h4-size:22px;
  }

  html[data-caersyn-text-size="extra-large"]{
    --caersyn-reading-size:24px;
    --caersyn-reading-leading:1.58;
    --caersyn-support-size:21px;
    --caersyn-support-leading:1.56;
    --caersyn-label-size:13px;
    --caersyn-card-title-size:32px;
    --caersyn-navigation-title-size:24px;
    --caersyn-article-h2-size:36px;
    --caersyn-article-h3-size:31px;
    --caersyn-article-h4-size:26px;
  }

  .caersyn-responsive-actions--with-menu{
    display:flex;
  }

  .caersyn-responsive-actions .burger{
    min-height:44px;
  }

  .body-col p,
  .flow-intro p,
  .feature p,
  .step-desc,
  .card p,
  .closing-copy,
  .note-desc,
  .paper-desc,
  .prose p,
  .hero-sub,
  .lede,
  .problem-note,
  .fstep p,
  .val p,
  .case p,
  .pilot-fit > p:not(.kicker),
  .pilot-fit-grid li,
  .track p,
  .form-ok p,
  .body p,
  .body li,
  .body blockquote p,
  .cx-intro,
  body > main > p,
  body > main > ul li,
  body > main > ol li,
  .main .inner > p:not(.kicker){
    font-size:var(--caersyn-reading-size);
    line-height:var(--caersyn-reading-leading);
  }

  /* Long-form publications already use 18px prose on wider layouts. */
  .body p{
    font-size:max(18px,var(--caersyn-reading-size));
  }

  .body blockquote p{
    font-size:max(19px,var(--caersyn-reading-size));
  }

  .main .inner > .lede{
    font-size:max(17.5px,var(--caersyn-reading-size));
  }

  .ledger li,
  .rec,
  .spec-list li,
  .records-note,
  .read-meta,
  .cx-desc,
  .body th,
  .body td,
  .code,
  body > main > pre{
    font-size:var(--caersyn-support-size);
    line-height:var(--caersyn-support-leading);
  }

  .field input,
  .field select,
  .field textarea{
    font-size:max(16px,var(--caersyn-support-size));
  }

  .feature h3,
  .card h3,
  .step-title,
  .note-title,
  .paper-title,
  .read-title,
  .fstep h3,
  .case h3,
  .track h4{
    font-size:var(--caersyn-card-title-size);
    line-height:1.2;
  }

  .cx-title{
    font-size:var(--caersyn-navigation-title-size);
    line-height:1.25;
  }

  .body h2{
    font-size:var(--caersyn-article-h2-size);
    line-height:1.16;
  }

  .body h3{
    font-size:var(--caersyn-article-h3-size);
    line-height:1.2;
  }

  .body h4{
    font-size:var(--caersyn-article-h4-size);
    line-height:1.28;
  }

  .btn,
  .card-link,
  .note-link,
  .paper-link,
  .paper-tag,
  .read-link,
  .publication-formats a,
  .breadcrumbs,
  .publication-meta div,
  .footer-links a{
    font-size:var(--caersyn-label-size);
  }
}

@media screen and (max-width:800px){
  .caersyn-responsive-actions--standalone{
    display:flex;
  }
}

@media screen and (max-width:360px){
  .caersyn-responsive-actions{
    gap:8px;
  }

  .caersyn-text-panel{
    position:fixed;
    top:72px;
    right:14px;
    left:14px;
    width:auto;
  }
}

@media screen and (max-width:240px){
  .caersyn-text-panel{
    top:68px;
    right:12px;
    left:12px;
  }
}

@media print{
  .caersyn-responsive-actions{
    display:none!important;
  }
}
