/* Applications (14 Oct): the example site's sections replace the old Applications block (src/applications-v2.js).
   The site's fonts; the per-application stylesheets (mattresses/sofas/chairs.css) carry the rest. */
html.sqx-on .sq-app{display:none!important}
/* The page's own container shrinks to its content; the wide comparison table (it scrolls sideways on phones)
   would widen it past the screen, so the container takes the full width instead. */
html.sqx-on :has(> .sq-app){align-self:stretch!important;width:100%!important;min-width:0!important}
.sqx{min-width:0;max-width:100%;overflow-x:clip}
.sqx{--sqx-font:"Soin Sans Neue Roman","Soin Sans Neue",system-ui,-apple-system,"Segoe UI",sans-serif;display:block;width:100%;background:#000;color:#f5f5f7;font-family:var(--sqx-font);padding-top:64px;text-align:left}
.sqx :is(h1,h2,h3,strong,.closing-cta){font-family:"Soin Sans Neue Medium",var(--sqx-font);font-weight:500}
.sqx img.family-picture{object-fit:cover}
.sqx .comparison-table thead th>span{white-space:normal!important}
.sqx .sqx-links th,.sqx .sqx-links td{border-bottom:0}
.sqx .sqx-links td{padding-top:18px;padding-bottom:4px;text-align:center}
.sqx .sqx-links a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15px;color:#f5f5f7}
.sqx .sqx-links a:hover{color:#fff;text-decoration:underline}
.sqx .sqx-note{margin:8px 0 0;font-size:15px;line-height:1.6;color:#91919b}
.sqx .family-link{display:inline-flex;align-items:center;min-height:44px}
.sqx{font-size:17px}
/* Body text at least 17 px (site rule); eyebrows, captions, notes and short card lines stay at 15 px or more. */
.sqx :is(.core-intro,.core-description,.description,.closing-description,.subtitle,.assembly-copy p,.response-copy p,.chair-response-copy p,.families-heading>p,.comparison-heading>p){font-size:clamp(17px,1.2vw,19px)!important;line-height:1.6}
.sqx .comparison-table td.spec-value{font-size:17px;line-height:1.5;color:#d4d4dc;padding-left:12px;padding-right:12px}
.sqx .comparison-legend{font-size:15px;line-height:1.9;color:#91919b;margin:25px 0 0;display:flex;align-items:center;gap:6px 24px;flex-wrap:wrap}
.sqx .comparison-legend .sqx-leg{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:15px;white-space:nowrap}
.sqx .comparison-legend .sqx-leg>span{font-size:19px;margin:0}
.sqx .comparison-legend .legend-yes{color:var(--sprinqs-blue)}
.sqx .comparison-legend .legend-no{color:#818894}
.sqx .comparison-legend .legend-none{color:#5d6470}
/* Phones: all three products side by side on one screen, no sideways scrolling. */
@media (max-width:650px){
 .sqx .comparison-table,.sqx .four-way .comparison-table{min-width:0!important;table-layout:fixed}
 .sqx .comparison-table .feature-column{width:34%!important}
 .sqx .comparison-table thead th{font-size:15px!important;line-height:1.3;padding:0 4px 16px!important}
 .sqx .comparison-table thead .feature-heading{position:static;padding-left:0!important}
 .sqx .comparison-picture{max-width:100%!important;margin-bottom:10px}
 .sqx .comparison-table tbody th{position:static;box-shadow:none;font-size:15px;line-height:1.4;padding:14px 8px 14px 0}
 .sqx .comparison-table tbody td{padding:14px 2px}
 .sqx .comparison-table td.spec-value{font-size:15px;padding-left:2px;padding-right:2px}
 .sqx .feature-mark{font-size:24px}
 .sqx .comparison-mobile-hint{display:none}
}
.sqx .feature-mark.unknown{color:#5d6470;font-size:24px}
.sqx-app,.sqx-stage,.sqx-tabs{display:block}
/* Tab switch: the tab cards and the page stay still; only the content below them moves, with the site's page
   transition (Framer page transition settings: new view from one screen below, old view to opacity .35 and
   y -20px, 0.65 s, cubic-bezier(.27,0,.51,1)). The names exist only during a tab switch, so the site's own page
   transitions treat the Applications content like the rest of the page. */
html.sqx-vt .sqx-stage{view-transition-name:sqx-content}
html.sqx-vt .sqx-tabs{view-transition-name:sqx-tabs}
@keyframes sqx-vt-in{from{transform:translate(0,100vh)}to{transform:none}}
@keyframes sqx-vt-out{from{opacity:1;transform:none}to{opacity:.35;transform:translate(0,-20px)}}
html.sqx-vt::view-transition-old(root),html.sqx-vt::view-transition-new(root),html.sqx-vt::view-transition-group(sqx-content),html.sqx-vt::view-transition-group(sqx-tabs){animation:none}
html.sqx-vt::view-transition-old(sqx-tabs){display:none}
html.sqx-vt::view-transition-new(sqx-tabs){animation:none;opacity:1}
html.sqx-vt::view-transition-new(sqx-content){animation:sqx-vt-in .65s cubic-bezier(.27,0,.51,1) both}
html.sqx-vt::view-transition-old(sqx-content){animation:sqx-vt-out .65s cubic-bezier(.27,0,.51,1) both;mix-blend-mode:normal}
html.sqx-vt::view-transition-image-pair(sqx-content){overflow:clip}
@media (prefers-reduced-motion:reduce){html.sqx-vt::view-transition-new(sqx-content),html.sqx-vt::view-transition-old(sqx-content){animation:none}}
/* Tabs stay at the top while scrolling, right under the site menu (Ayberk: "seçenekler kaydırınca tepede kalsın,
   çünkü tepeye dönmek zor oluyor"). Once stuck they get shorter; the same amount is added below them, so the page
   underneath does not move. --sqx-menu is the site menu's height, --sqx-stuck the stuck tab row's height. */
.sqx{--sqx-menu:80px;--sqx-stuck:68px;--sqx-shrink:54px}
.sqx-tabs{position:sticky;top:var(--sqx-menu);z-index:40;background:#000;padding-bottom:12px;transition:margin-bottom .2s ease,box-shadow .2s ease}
.sqx-tabs .choices{transition:margin-top .2s ease}
.sqx-tabs .choice{transition:min-height .2s ease,padding .2s ease,background .2s ease,color .2s ease}
.sqx-tabs .choice svg{transition:height .2s ease}
.sqx-tabs.stuck{margin-bottom:var(--sqx-shrink);box-shadow:0 10px 24px -12px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.07)}
.sqx-tabs.stuck .choices{margin-top:8px!important}
.sqx-tabs.stuck .choice{min-height:56px!important;padding-top:8px!important;padding-bottom:8px!important}
.sqx-tabs.stuck .choice svg{height:30px!important}
/* Scroll scenes sit below the menu and the tab row. */
.sqx :is(.assembly-pin,.response-pin,.chair-response-pin){top:calc(var(--sqx-menu) + var(--sqx-stuck))!important;height:calc(100svh - var(--sqx-menu) - var(--sqx-stuck))!important;padding-top:12px!important}
@media (max-width:809px){.sqx{padding-top:88px}}
@media (max-width:650px){
 .sqx{--sqx-stuck:62px;--sqx-shrink:41px}
 .sqx-tabs{padding-bottom:10px}
 .sqx-tabs.stuck .choices{margin-top:6px!important}
 .sqx-tabs.stuck .choice{min-height:52px!important;padding-top:6px!important;padding-bottom:6px!important}
 .sqx-tabs.stuck .choice svg{height:24px!important}
 /* Narrow cards: the picture above the word, and only the word once the row is held at the top. */
 .sqx-tabs .choice{flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:6px;text-align:center!important}
 .sqx-tabs .choice svg{order:-1}
 .sqx-tabs.stuck .choice svg{display:none!important}
}
@media (prefers-reduced-motion:reduce){.sqx-tabs,.sqx-tabs .choices,.sqx-tabs .choice,.sqx-tabs .choice svg{transition:none}}
/* Phones: the small labels above the headings stay on one line. */
@media (max-width:650px){.sqx .eyebrow{letter-spacing:.1em!important}}
/* Scene sizes (Recep, 15 Oct, on the layer and sphere scenes: "Bu çok küçük olmuş, baya büyültelim bunu" · "Buda aynı";
   on the chair scene: "Chairs kısmında bu kesik"). The example sized its scenes for a full-height pin; here the menu and the
   tab row take --sqx-top, so the chair scene leaves that room out and its heading is no longer cut. The layer and sphere
   scenes are sized by their scripts (tools/applications-v2/hazirla.mjs, SIZE). */
.sqx{--sqx-top:calc(var(--sqx-menu) + var(--sqx-stuck))}
.sqx .chair-response-visual{width:min(94vw,1150px,calc((100svh - 285px - var(--sqx-top))*1.98))!important}
@media (max-width:650px){
 .sqx .chair-response-visual{width:min(90vw,calc((100svh - 215px - var(--sqx-top))*1.98))!important}
}
/* Wide screens: the words on the left, the scene on the right at the full height under the tab row. */
@media (min-width:900px) and (min-aspect-ratio:5/4){
 .sqx :is(.assembly-pin,.response-pin){display:grid!important;grid-template-columns:minmax(260px,min(30vw,460px)) auto;grid-template-rows:1fr auto auto auto 1fr;column-gap:clamp(32px,5vw,96px);justify-content:center;align-items:center;padding-left:max(24px,4vw)!important;padding-right:max(24px,4vw)!important;padding-bottom:16px!important}
 .sqx :is(.assembly-copy,.response-copy){grid-column:1;grid-row:2;max-width:none!important;text-align:left!important}
 .sqx :is(.assembly-copy,.response-copy) p{margin-left:0!important;margin-right:0!important}
 .sqx :is(.assembly-controls,.response-controls){grid-column:1;grid-row:3;justify-content:flex-start!important;flex-wrap:wrap;margin-top:22px!important}
 .sqx :is(.assembly-hint,.response-hint){grid-column:1;grid-row:4;text-align:left}
 .sqx :is(.assembly-stage,.response-visual){grid-column:2;grid-row:1/-1;margin:0!important;align-self:center}
}