/* AB26–27: Stylli's real superellipse(3) construction, scoped by component role.
   Source: designer-v01/layout.css and the final composer/button cascade.
   No clipping mask is put around focus rings, the close control or native picker. */
#app31 {--ab-panel-radius:28px;--ab-card-radius:20px;--ab-field-radius:12px;--ab-action-radius:26px}
#app31 #application {corner-shape:superellipse(3);border-radius:var(--ab-panel-radius)}
#app31 #application .application-frame {corner-shape:superellipse(3);border-radius:var(--ab-panel-radius)}
#app31 #application-form :is(input,select,textarea) {corner-shape:superellipse(3);border-radius:var(--ab-field-radius) var(--ab-field-radius) 0 0}
#app31 :is(.support-portrait,.support-portrait img,.partner-options button) {corner-shape:superellipse(3);border-radius:var(--ab-card-radius)}
#app31 :is(.path,.owner-choices button,.support-topic>summary,.faq-item>summary) {corner-shape:superellipse(3);border-radius:12px;transition:background-color 220ms ease,color 220ms ease,scale 160ms ease}
#app31 :is(.menu-toggle,.key-reset,#application-close,.back-to-top) {scale:1;transition:background-color 220ms ease,color 220ms ease,scale 160ms ease}
/* Semantic circles and the exact circular logo stay circular. */
#app31 :is(.brand-mark,.path-num,.owner-choices button>span,.key-reset,#application-close,.back-to-top),
#app31 :is(.key-reset,#application-close,.back-to-top)::before {corner-shape:round}
#app31 :is(.path,.owner-choices button,.support-topic>summary,.faq-item>summary):active {scale:.995}
#app31 :is(.menu-toggle,.key-reset,#application-close,.back-to-top):active {scale:.94}
@supports(appearance:base-select) and selector(::picker(select)) {
  #app31 #application-form select::picker(select) {corner-shape:superellipse(3);border-radius:18px}
  #app31 #application-form select option {corner-shape:superellipse(3);border-radius:10px}
}
/* The ready shared-renderer track supersedes the former CSS photo crossfade. */
#app31:not([data-static=true]) .stage[data-chooser3d=ready] .visual {opacity:1!important;transition:none!important}
#app31:not([data-static=true]) .stage[data-chooser3d=ready] :is(.choice-media-own,.choice-media-courier) {visibility:hidden!important;opacity:0!important}
#app31 .stage[data-chooser3d=ready] .choice-media-label {display:none!important}
#app31 .choice-media[data-interactive=true] {pointer-events:auto;cursor:grab;touch-action:pan-y pinch-zoom;outline-offset:7px}
#app31 .choice-media[data-dragging=true] {cursor:grabbing}
#app31 .choice-media[data-interactive=true]:focus-visible {outline:2px solid #758969;border-radius:20px;corner-shape:superellipse(3)}
#app31[data-input-modality=pointer] .choice-media:focus {outline:none}
#app31[data-static=true] :is(.hero-car-link,.header-cta,.yellow-link,.dark-link,.copy-button,.path-cta,.support-action,.partners>summary,.path,.owner-choices button,.support-topic>summary,.faq-item>summary,.menu-toggle,.key-reset,#application-close,.back-to-top) {transition:none!important;translate:none!important;scale:1!important}
@media(prefers-reduced-motion:reduce) {
  #app31 :is(.hero-car-link,.header-cta,.yellow-link,.dark-link,.copy-button,.path-cta,.support-action,.partners>summary,.path,.owner-choices button,.support-topic>summary,.faq-item>summary,.menu-toggle,.key-reset,#application-close,.back-to-top) {transition:none!important;translate:none!important;scale:1!important}
}

/* AC23/29: same four owner states; physical touch keeps native pan/pinch. */
#app31 #owners .owner-selection-title{font-weight:650!important}
#app31 #owners .key-scene>canvas,#app31 #footer-art{touch-action:pan-y pinch-zoom}

@media(max-width:760px){
 /* The format controls use one row, returning the saved height to the model. */
 #app31:not([data-static=true]) .choices{top:88px}
 #app31:not([data-static=true]) .choices h2{font-size:30px;margin:10px 0 16px}
 #app31:not([data-static=true]) .path-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 #app31:not([data-static=true]) .path{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px;min-height:82px;padding:10px 7px}
 #app31:not([data-static=true]) .path-name{font-size:14px;line-height:1.2;text-align:left}
 #app31:not([data-static=true]) .path-num{font-size:10px;flex:0 0 auto}
 #app31:not([data-static=true]) .path-arrow{display:none}
 #app31:not([data-static=true]) .path-response{margin-top:12px}
 #app31:not([data-static=true]) .choice-media{top:calc(88px + var(--path-copy-height,350px) + 10px)!important;bottom:max(18px,calc(100% - 100svh + 18px))!important}
 #app31 #journey .journey-mobile-media{height:min(210px,28svh);position:relative;margin:4px 0 18px}
 #app31 #journey .journey-mobile-media .journey-mobile-scene{width:100%;height:100%;max-height:none;margin:0;visibility:hidden}
 #app31 #journey .journey-mobile-media[data-ready=true] .journey-mobile-scene{visibility:visible}
 #app31 #journey .journey-render-status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:#65725e}
 #app31 #journey .journey-mobile-media[data-ready=true] .journey-render-status{display:none}
 #app31 #journey .journey-mobile-media[data-ready=unavailable]{height:auto;min-height:32px}
 #app31 #journey .journey-mobile-media[data-ready=unavailable] .journey-mobile-scene{display:none}
 #app31 #journey .journey-mobile-media[data-ready=unavailable] .journey-render-status{position:static;justify-content:flex-start}
}
/* AD1 — a real opening art bay between the CTA and the signature.
   The CSS box measured for the model is also the composition the viewer sees. */
@media(max-width:760px){
 #app31:not([data-static=true]) .stage{min-height:100svh}
 #app31:not([data-static=true]) #hero-art-slot{position:absolute;grid-area:auto;left:var(--edge);right:var(--edge);top:calc(var(--hero-content-bottom,355px) + 10px);bottom:clamp(86px,12svh,112px);height:auto;min-height:0;margin:0}
 #app31:not([data-static=true]) .stage .back-word{position:absolute;inset:auto var(--edge) clamp(42px,6.2svh,64px);display:flex;flex-flow:row nowrap;align-items:baseline;justify-content:flex-start;gap:.18em;height:auto;margin:0;font-size:clamp(30px,10.4vw,60px);line-height:.94;white-space:nowrap;letter-spacing:-.05em}
 #app31:not([data-static=true]) .scene-footer{bottom:max(13px,env(safe-area-inset-bottom))}
}
@media(max-width:760px) and (max-height:680px){
 #app31:not([data-static=true]) .stage{grid-template-rows:66px auto minmax(0,1fr)}
 #app31:not([data-static=true]) #hero-copy{padding-top:10px}
 #app31:not([data-static=true]) #hero-copy h1{font-size:clamp(29px,8.65vw,36px);line-height:1.13}
 #app31:not([data-static=true]) .hero .eyebrow{margin-bottom:8px}
 #app31:not([data-static=true]) .hero-bottom{margin-top:10px;gap:8px}
 #app31:not([data-static=true]) #hero-art-slot{bottom:76px}
 #app31:not([data-static=true]) .choices{top:72px}
 #app31:not([data-static=true]) .choices h2{font-size:clamp(23px,6.9vw,30px);margin:6px 0 9px}
 #app31:not([data-static=true]) .path-list{gap:5px}
 #app31:not([data-static=true]) .path{min-height:62px;padding:6px 4px;gap:4px}
 #app31:not([data-static=true]) .choice-media{top:calc(72px + var(--path-copy-height,300px) + 6px)!important}
}

.ad-city-backdrop[hidden]{display:none!important}

@media(max-width:760px){
 #app31:not([data-static=true]) .stage{--ad-art-foot:clamp(94px,13.5svh,120px)}
 #app31:not([data-static=true]) #hero-art-slot{
  align-self:start;justify-self:stretch;bottom:auto;
  height:max(0px,calc(100svh - var(--hero-content-bottom,355px) - 10px - var(--ad-art-foot)));
 }
}
@media(max-width:760px) and (max-height:680px){
 #app31:not([data-static=true]) .stage{--ad-art-foot:84px}
}

.ad-city-trip{display:none;position:absolute;z-index:1;pointer-events:none;overflow:visible}
.ad-city-trip path{animation:ad-navigator-trip 5.8s linear infinite}
@keyframes ad-navigator-trip{0%,12%{stroke-dashoffset:6;opacity:0}17%{opacity:1}80%{opacity:1}86%,100%{stroke-dashoffset:-100;opacity:0}}
@media(prefers-reduced-motion:reduce){.ad-city-trip path{animation:none;opacity:0}}

/* The stage and header share one exposure while the reading changes sides.
   Keep the outgoing accent until the dark paper starts to lighten. */
#app31:not([data-static=true]) .stage {
  background-image:none;
}
#app31:not([data-static=true]) .stage #hero-copy {
  color:color-mix(in srgb, #f2efdf, white var(--ad-white-ink,0%));
}
#app31:not([data-static=true]) #hero-copy h1 .yellow {
  color:color-mix(in srgb, #eed66c, white var(--ad-white-ink,0%));
}
#app31:not([data-static=true]) #hero-copy .eyebrow {
  color:color-mix(in srgb, #acb6a5, white var(--ad-white-ink,0%));
}
#app31:not([data-static=true]) #hero-copy .hero-bottom p {
  color:color-mix(in srgb, #b5bfb0, white var(--ad-white-ink,0%));
}
#app31:not([data-static=true]) .stage[data-chapter-ink=chooser] #paths :is(h2,.path-name,.path-response-title) {
  color:color-mix(in srgb, black, #19291f var(--ad-final-ink,100%));
}
#app31:not([data-static=true]) .stage[data-chapter-ink=chooser] #paths :is(.eyebrow,.path-num,.path-response-kicker,#path-description) {
  color:color-mix(in srgb, black, #435540 var(--ad-final-ink,100%));
}
#app31:not([data-static=true]) .stage[data-chapter-ink=chooser] #paths .path.is-active .path-num {
  color:#17241a;
}
#app31:not([data-static=true]) .stage[data-chooser3d=ready] .choice-media {
  transform-origin:0 0;
  opacity:1;
}

/* The shared stage owns the chapter exposure. */
#app31:not([data-static=true]) .stage>.choice-plane{display:none}
@media(max-width:760px) and (max-height:620px){
 #app31:not([data-static=true]) .stage{grid-template-rows:72px auto minmax(0,1fr)}
 #app31:not([data-static=true]) #hero-copy{padding-top:14px}
 #app31:not([data-static=true]) #hero-copy .eyebrow{margin-bottom:6px}
 #app31:not([data-static=true]) #hero-copy .hero-bottom{margin-top:8px}
 #app31:not([data-static=true]) .stage{--ad-art-foot:72px}
 #app31:not([data-static=true]) .stage .back-word{bottom:32px;font-size:clamp(25px,8.3vw,36px)}
}

/* A short handset can scroll through the whole opening plate before it pins.
   The later chooser is placed below the fixed masthead in the pinned viewport. */
@media(max-width:760px) and (max-height:620px){
 #app31:not([data-static=true]) .stage{
   --ad-short-extra:clamp(0px,calc(686px - 100svh),170px);
   height:calc(100svh + var(--ad-short-extra));min-height:calc(100svh + var(--ad-short-extra));
   top:calc(0px - var(--ad-short-extra));grid-template-rows:80px auto minmax(0,1fr);
 }
 #app31:not([data-static=true]) #hero-art-slot{
   height:max(0px,calc(100svh + var(--ad-short-extra) - var(--hero-content-bottom,310px) - 10px - var(--ad-art-foot)));
 }
 #app31:not([data-static=true]) .choices{top:calc(84px + var(--ad-short-extra))}
 #app31:not([data-static=true]) .choice-media{
   top:calc(84px + var(--ad-short-extra) + var(--path-copy-height,300px) + 8px)!important;
   bottom:16px!important;
 }
}

/* The opening and chooser share this layout flag with their camera and hit area.
   The rest of the page retains its own, independent responsive grid. */
@media (max-width:1100px) {
  #app31 .stage { --ad-story-layout:stacked; }
}
@media (min-width:761px) and (max-width:1100px) {
  #app31 .stage {
    --ad-tablet-height:max(740px,100svh);
    --ad-tablet-extra:max(0px,calc(740px - 100svh));
    --ad-tablet-art-top:calc(var(--hero-content-bottom,370px) + 20px);
    --ad-tablet-foot:100px;
  }
  #app31:not([data-static=true]) .stage {
    grid-template-columns:minmax(0,1fr);grid-template-rows:100px auto minmax(0,1fr);
    column-gap:0;height:var(--ad-tablet-height);min-height:var(--ad-tablet-height);
    top:calc(0px - var(--ad-tablet-extra));
  }
  #app31:not([data-static=true]) #hero-copy {
    grid-area:2/1;position:relative;inset:auto;align-self:start;width:100%;
    max-width:none;padding:24px 0 0;margin:0;
  }
  #app31 #hero-copy h1 {font-size:clamp(43px,5.9vw,58px);line-height:1.12;max-width:none}
  #app31 #hero-copy .eyebrow {margin-bottom:14px}
  #app31 #hero-copy .hero-bottom {margin-top:18px}
  #app31 #hero-copy .hero-bottom p {max-width:480px;font-size:16px;line-height:1.45}
  #app31 #hero-copy .hero-car-link {margin-top:15px}
  #app31 .stage #hero-art-slot {
    position:absolute;grid-area:auto;align-self:start;justify-self:stretch;
    inset:var(--ad-tablet-art-top) var(--edge) auto;
    height:max(1px,calc(var(--ad-tablet-height) - var(--ad-tablet-art-top) - var(--ad-tablet-foot)));
    width:auto;min-height:0;margin:0;
  }
  #app31 .stage .back-word {
    position:absolute;grid-area:auto;inset:auto var(--edge) 32px;
    display:flex;flex-flow:row nowrap;align-items:baseline;justify-content:flex-start;
    gap:.18em;height:auto;margin:0;font-size:clamp(43px,5.5vw,60px);line-height:.94;
  }
  #app31:not([data-static=true]) .choices {
    position:absolute;grid-area:auto;inset:calc(98px + var(--ad-tablet-extra)) var(--edge) auto;
    max-width:none;width:auto;margin:0;
  }
  #app31 .choices h2 {font-size:clamp(33px,4.3vw,48px);margin:10px 0 17px}
  #app31 .path-list {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  #app31 .path {display:grid;grid-template-columns:26px minmax(0,1fr);grid-template-rows:auto;
    align-content:center;align-items:center;min-height:60px;padding:8px 2px;gap:2px 8px}
  #app31 .path-name {font-size:clamp(14px,1.75vw,18px);line-height:1.2}

  #app31 .path-response {margin-top:14px}
  #app31:not([data-static=true]) .choice-media {
    /* Its children are absolutely positioned: a start-aligned auto-height
       box can collapse to zero. Size the real drawing and gesture bay. */
    --ad-choice-top:calc(98px + var(--ad-tablet-extra) + var(--path-copy-height,320px) + 14px);
    position:absolute!important;grid-area:auto;align-self:stretch;justify-self:stretch;
    inset:var(--ad-choice-top) var(--edge) auto!important;
    width:auto!important;height:max(1px,calc(var(--ad-tablet-height) - var(--ad-choice-top) - 22px))!important;margin:0!important;max-height:none;
  }
  #app31[data-static=true] .stage {--hero-height:var(--ad-tablet-height)}
  #app31[data-static=true] #hero-copy {height:var(--hero-height);padding:124px var(--edge) 0}
  #app31[data-static=true] .stage .back-word {inset:calc(var(--hero-height) - 81px) var(--edge) auto}
  #app31[data-static=true] .choices {display:flex;flex-direction:column;gap:0;padding:58px var(--edge)}
  #app31[data-static=true] .choice-static-images {align-self:stretch;width:100%;order:1;margin-top:20px}
}

/* On a tall two-column desktop, the side glass needs lateral room beyond
   the primary slab. Bound the fit bay by the reading-column width as well
   as the window height. The wide presentation retains its existing fit. */
@media (min-width:1101px) and (max-aspect-ratio:4/3) {
  #app31:not([data-static=true]) .stage #hero-art-slot {max-height:48vw}
}


/* Short landscape tablets have two genuine reading columns. Both subjects
   cross below the outgoing text using the same measured bays as desktop.
   Portrait keeps the vertical story; the rest of the page keeps its own grid. */
@media (min-width:761px) and (max-width:1100px) and (max-height:760px) {
  #app31:not([data-static=true]) .stage {
    --ad-story-layout:compact;
    --ad-gutter:clamp(14px,1.8vw,20px);
    --ad-other-col:calc(50% + var(--ad-gutter));
    --ad-compact-height:max(100svh,calc(130px + var(--path-copy-height,365px)),520px);
    --ad-card-height:min(45vw,calc(var(--ad-compact-height) - 176px),460px);
  }
  #app31:not([data-static=true]) .stage {
    height:var(--ad-compact-height);min-height:0;top:0;
    grid-template-rows:none;grid-template-columns:none;
  }
  #app31:not([data-static=true]) #hero-copy {
    position:absolute;inset:clamp(118px,22svh,154px) var(--ad-other-col) auto var(--edge);
    grid-area:auto;width:auto;max-width:none;padding:0;margin:0;
  }
  #app31:not([data-static=true]) #hero-copy h1 {font-size:clamp(32px,4.1vw,45px);line-height:1.1}
  #app31:not([data-static=true]) #hero-copy .eyebrow {margin:0 0 16px}
  #app31:not([data-static=true]) #hero-copy .hero-bottom {margin-top:18px}
  #app31:not([data-static=true]) #hero-copy .hero-bottom p {max-width:39ch;font-size:15px;line-height:1.48}
  #app31:not([data-static=true]) .stage #hero-art-slot {
    grid-area:auto;position:absolute;inset:auto var(--edge) 84px var(--ad-other-col);
    width:auto;height:var(--ad-card-height);margin:0;
  }
  #app31:not([data-static=true]) .stage .back-word {
    inset:auto var(--edge) 53px var(--ad-other-col);height:auto;width:auto;
    justify-content:center;gap:.18em;font-size:clamp(34px,4.55vw,50px);line-height:.94;
  }
  #app31:not([data-static=true]) #paths {
    position:absolute;grid-area:auto;inset:100px var(--edge) auto var(--ad-other-col);
    width:auto;max-width:none;min-width:0;padding:0;margin:0;
  }
  #app31:not([data-static=true]) #paths>.eyebrow {margin:0;font-size:10px;line-height:1.4}
  #app31:not([data-static=true]) #paths h2 {min-height:0;font-size:clamp(28px,3.25vw,36px);line-height:1.08;margin:9px 0 13px}
  #app31:not([data-static=true]) #paths .path-list {display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0}
  #app31:not([data-static=true]) #paths .path {display:grid;grid-template-columns:25px minmax(0,1fr);
    grid-template-rows:auto;align-items:center;align-content:center;gap:8px;min-height:44px;padding:5px 0}
  #app31:not([data-static=true]) #paths .path .path-name {font-size:clamp(14px,1.55vw,17px);line-height:1.22}

  #app31:not([data-static=true]) #paths .path-response {display:block;margin-top:12px;min-height:0}
  #app31:not([data-static=true]) #paths .path-response-copy {padding-left:13px}
  #app31:not([data-static=true]) #paths .path-response-kicker {font-size:9px;line-height:1.25;margin:0 0 4px}
  #app31:not([data-static=true]) #paths .path-response-title {font-size:clamp(17px,1.8vw,20px);line-height:1.22;margin:0 0 5px}
  #app31:not([data-static=true]) #paths #path-description {font-size:14px;line-height:1.43;margin:0;max-width:44ch}
  #app31:not([data-static=true]) #paths .path-cta {margin-top:12px}
  #app31:not([data-static=true]) .stage>.choice-media {
    inset:108px var(--ad-other-col) auto var(--edge)!important;width:auto!important;
    height:calc(var(--ad-compact-height) - 164px)!important;
    align-self:stretch;justify-self:stretch;max-height:none!important;margin:0!important;
  }
  #app31:not([data-static=true]) .scene-footer {bottom:15px}
}