/* Consistent vector symbols, including iOS where text symbols can become emoji. */
.ui-icon{display:inline-block;width:1em;height:1em;vertical-align:-.12em;stroke-width:1.7}
.motion-icon .ui-icon{width:14px;height:14px}
.closing-word>span .ui-icon{width:1em;height:1em}
.found-icon .ui-icon{width:1em;height:1em}
.product-breadcrumb>a,.product-cross-sell>a{display:inline-flex;align-items:center;gap:9px}
.product-highlights li{display:flex;align-items:baseline;gap:10px}
.product-highlights li:before{content:'';display:block;flex:0 0 10px;width:10px;height:6px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(-45deg);margin:0;color:var(--product-accent)}

/* On phones the story follows the document flow; content sets each scene's height. */
@media(max-width:760px), (max-width:900px) and (max-height:500px){
  :root{--gutter:22px}
  html{-webkit-text-size-adjust:100%;scroll-padding-bottom:90px}
  body:not(.product-page){padding-bottom:86px}
  .site-header,.product-page .site-header{
    position:relative;inset:auto;height:auto;min-height:108px;padding:12px var(--gutter) 0;
    display:grid;grid-template-columns:1fr auto;gap:0;mix-blend-mode:normal;
    background:var(--product-bg,#171714);color:var(--product-ink,#eee8dc)
  }
  .site-header .brand{grid-column:1;grid-row:1;font-size:20px;min-height:44px;width:max-content;letter-spacing:-.8px}
  .brand-symbol{font-size:25px;margin-right:12px;letter-spacing:-6px}
  .brand-symbol span{font-size:25px}
  .brand-dev{font-size:.85em}
  .site-header .header-note,.site-header .contact-link{display:none}
  .site-header nav{grid-column:1/-1;grid-row:2;gap:26px;min-height:44px;margin-top:7px;border-top:1px solid var(--product-line,#eee8dc26);font-size:12px}
  .site-header nav>a{display:inline-flex;align-items:center;min-height:44px;gap:3px}
  .site-header nav>a:after{bottom:7px}
  .site-header sup{font-size:8px}
  .language-switch{position:absolute;right:var(--gutter);top:12px;border:0;margin:0;padding:0;gap:0;font-size:11px}
  .language-switch>span{display:none}
  .language-switch button{min-width:42px;min-height:44px;padding:0;opacity:.6}
  .language-switch button[aria-pressed=true]:after{left:12px;right:12px;bottom:5px}

  .scroll-scene,.scroll-scene.hero{height:auto}
  .scroll-scene>.stage{position:relative;top:auto;height:auto;min-height:0;display:flex;flex-direction:column;padding:42px var(--gutter) 36px;overflow:clip}
  .scroll-scene.hero>.hero-stage{padding-top:28px;padding-bottom:32px}
  .hero-heading,html[lang=en] .hero-heading{position:relative;inset:auto;order:1;width:100%;transform:none;will-change:auto}
  html[lang=en] .hero h1{font-size:clamp(42px,13.2vw,82px);line-height:1.04;letter-spacing:-.065em}
  html[lang=tr] .hero h1{font-size:clamp(46px,14.2vw,86px);line-height:1.03;letter-spacing:-.065em}
  .hero h1>span,html[lang=en] .hero h1>span{font-size:1.16em;line-height:.98;margin-top:4px;letter-spacing:-.045em}
  .hero-heading-label,html[lang=en] .hero-heading-label{font-size:10px;line-height:1.8;letter-spacing:.7px;max-width:none;margin-top:22px;color:#b6b4a9}
  .hero-topline,.object-label,.sculpture-axis,.hero-exit{display:none}
  .sculpture-shell{position:relative;inset:auto;order:2;width:100%;height:clamp(230px,76vw,350px);margin:0;transform:none;will-change:auto}
  .sculpture-fallback{width:64%;height:70%;left:18%;top:15%}
  .sculpture-fallback i{border-width:24px}
  .hero-footer{position:relative;inset:auto;order:3;display:flex;align-items:stretch;gap:12px;margin-top:10px;width:100%;opacity:1}
  .hero-footer>p{display:none}
  .scroll-cue{flex:1;min-height:64px;padding:14px 20px;gap:16px}
  .scroll-cue-icon{width:24px;height:30px;font-size:25px}
  .scroll-cue>.mono{font-size:10px;line-height:1.7;letter-spacing:.3px}
  .motion-toggle{width:48px;min-height:48px;flex-shrink:0;justify-content:center;padding:0;border:1px solid #eee8dc35}
  .motion-icon .ui-icon{width:19px;height:19px}
  .motion-label{display:none}
  .chapter-break{padding:16px 0}
  .chapter-break>div{font-size:29px;line-height:1.3;letter-spacing:-1px}
  .chapter-break span{font-size:24px;margin-inline:20px}

  .chapter-top{position:relative;inset:auto;order:0;font-size:10px;line-height:1.6;letter-spacing:.3px;padding-top:16px;width:100%;gap:18px}
  .chapter-top>span{align-items:flex-start;gap:10px;max-width:62%}
  .chapter-top b{font-size:12px;flex-shrink:0;line-height:1.5}
  .chapter-product{max-width:62%;flex-direction:column;align-items:flex-start;gap:10px}
  .chapter-product>span:first-child{display:flex;align-items:baseline;gap:10px}
  .chapter-product .product-status{font-size:9px;line-height:1.6;letter-spacing:0;gap:6px}
  .chapter-price{flex-direction:column;align-items:flex-end;gap:7px;text-align:right;flex-shrink:0}
  .chapter-price small{font-size:9px;letter-spacing:0;line-height:1.5;opacity:.8}
  .chapter-price strong{font-size:26px;line-height:1.1;white-space:nowrap}
  .chapter-price strong>span{font-size:10px}
  .chapter-copy,.alarm-copy,.spread-copy,.sports-copy,.trading-heading{
    position:relative;inset:auto;order:1;width:100%;max-width:none;margin-top:30px;transform:none;will-change:auto
  }
  .chapter-copy .small-label,.trading-heading .small-label,.sports-copy>.small-label{font-size:10px;line-height:1.7;letter-spacing:.4px}
  .chapter-copy h2,.trading-heading h2,html[lang=en] .trading-heading h2,html[lang=en] .spread-copy h2,
  .chapter-copy.sports-copy h2,html[lang=en] .chapter-copy.sports-copy h2{
    font-size:clamp(32px,9.3vw,62px);line-height:1.12;letter-spacing:-.055em;margin-top:16px
  }
  .chapter-copy h2>span,.trading-heading h2>span,.sports-copy h2>span{font-size:1.2em;line-height:1.06;margin-top:3px;white-space:normal}
  .chapter-copy p,.alarm-copy>p,.spread-copy p,.sports-copy>p{font-size:15px;line-height:1.8;max-width:none;margin-top:22px}
  .line-button,.terminal-caption .line-button,html[lang=en] .terminal-caption .line-button{display:flex;width:100%;min-height:48px;font-size:14px;gap:24px;padding:14px 0;margin-top:24px}
  .line-button svg{width:21px;height:21px}
  .scene-art,.alarm-art,.trade-art,.spread-art,.sports-art{
    position:relative;inset:auto;order:2;width:calc(100% + 2 * var(--gutter));height:auto;
    aspect-ratio:3/2;margin:26px calc(-1 * var(--gutter)) 0;perspective:none;flex-shrink:0
  }
  .scene-art>img{width:100%;height:100%;object-fit:cover;transform:none;mask-image:none;will-change:auto}
  .scene-art figcaption,.alarm-art figcaption,.sports-art figcaption{font-size:9px;line-height:1.6;letter-spacing:.5px;bottom:18px;right:var(--gutter)}
  .alarm-art>img{object-position:67% 50%}
  .alarm-art:after{background:linear-gradient(180deg,#e8e2d5,transparent 17%),linear-gradient(0deg,#e8e2d5,transparent 12%)}
  .found-notification{position:relative;inset:auto;order:3;width:100%;margin:0 0 24px;padding:20px;gap:14px;opacity:1;transform:none;will-change:auto;box-shadow:none}
  .found-notification small{font-size:9px;line-height:1.7;letter-spacing:.15px}
  .found-notification strong{font-size:17px;line-height:1.4;margin-top:9px}
  .found-notification>div>span{font-size:13px;line-height:1.5;gap:14px}
  .found-icon{font-size:26px;align-self:flex-start;margin-top:3px}
  .chapter-bottom,.blue-stage .chapter-bottom,.orange-stage .chapter-bottom{position:relative;inset:auto;order:5;flex-direction:column;align-items:flex-start;gap:14px;font-size:9px;line-height:1.7;letter-spacing:.2px;margin-top:22px}
  .phase-track{font-size:9px;gap:9px;flex-wrap:wrap;line-height:1.6}
  .phase-track i{width:12px}
  .phase{opacity:.7}
  .trade-art{aspect-ratio:1.8;opacity:.7}
  .trade-art>img{object-position:60% 48%}
  .trade-art:after{background:linear-gradient(180deg,#10100f,transparent 25%),linear-gradient(0deg,#10100f,transparent 25%)}
  .terminal-preview{position:relative;inset:auto;order:3;width:100%;margin:0;transform:none;will-change:auto;box-shadow:0 12px 28px #0005}
  .terminal-preview img{height:auto;object-fit:contain}
  .terminal-titlebar{min-height:38px;height:auto;font-size:8px;line-height:1.5;letter-spacing:0;padding:10px;gap:10px}
  .terminal-titlebar i{display:none}
  .terminal-titlebar>span{gap:4px}
  .terminal-titlebar>span:last-child{white-space:nowrap}
  .terminal-caption{position:relative;inset:auto;order:4;flex-direction:column;align-items:stretch;gap:0;margin-top:26px}
  .terminal-caption .small-label{font-size:10px;line-height:1.7;letter-spacing:.3px}
  .terminal-caption p{font-size:15px;line-height:1.8;margin-top:12px}
  .terminal-caption>.mono{position:static;font-size:9px;text-align:left;margin-top:22px;line-height:1.7}
  .terminal-caption>.mono small{font-size:9px}
  .spread-art>img{object-position:73% 50%}
  .spread-art:after{background:linear-gradient(180deg,#081b3c,transparent 20%),linear-gradient(0deg,#081b3c,transparent 18%)}
  .spread-lab{position:relative;inset:auto;order:3;width:100%;height:auto;padding:24px 0 0;margin:0;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:18px 14px;background:none}
  .exchange-quotes{grid-column:1/-1;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .quote>.mono{font-size:10px;line-height:1.6;letter-spacing:.4px}
  .quote strong{font-size:27px;line-height:1.6;letter-spacing:-1px}
  .quote strong>span{font-size:.53em}
  .quote-binance{text-align:right}
  .spread-number{position:relative;inset:auto;height:auto;margin:0;gap:4px;opacity:1}
  .spread-number>strong{font-size:64px;line-height:1}
  .percent-sign{font-size:24px;margin:0;align-self:baseline}
  .spread-number-label{position:static;font-size:10px;line-height:1.7;letter-spacing:.3px;text-align:right;margin:0}
  .signal-note{grid-column:1/-1;font-size:10px;line-height:1.7;flex-wrap:wrap;gap:8px;margin:0;padding-top:18px;border-top:1px solid #b8cdeb35;opacity:1}
  .signal-note>span:last-child{font-size:9px;line-height:1.7;max-width:none;margin-left:auto;text-align:right}
  .sports-art{aspect-ratio:1.2}
  .sports-art>img{object-position:77% 50%}
  .sports-art:after{background:linear-gradient(180deg,#111b16,transparent 22%),linear-gradient(0deg,#111b16,transparent 25%)}
  .sports-art figcaption{max-width:none;text-align:right}

  .catalogue{padding:60px var(--gutter) 44px}
  .catalogue-intro{display:block;margin-bottom:32px}
  .catalogue-intro>.small-label{display:block;font-size:10px;margin-bottom:22px}
  .catalogue-intro h2,html[lang=en] .catalogue-intro h2{font-size:clamp(37px,10.8vw,65px);line-height:1.12;letter-spacing:-.06em}
  .catalogue-intro h2>span{font-size:1.12em;line-height:1.1}
  .catalogue-intro>p{font-size:15px;line-height:1.8;padding:0;margin-top:24px}
  .catalogue-row{grid-template-columns:22px minmax(0,1fr) 22px;gap:12px;padding:26px 0}
  .catalogue-row:hover{padding-inline:0}
  .catalogue-index{grid-column:1;grid-row:1/3;font-size:10px;padding-top:4px}
  .catalogue-name,html[lang=en] .catalogue-name{grid-column:2;grid-row:1;font-size:22px;line-height:1.2;letter-spacing:-.7px}
  .catalogue-name>small{font-size:10px;line-height:1.65;letter-spacing:.15px;margin-top:10px}
  .catalogue-price{grid-column:2;grid-row:2;font-size:28px;letter-spacing:-1px;line-height:1.2}
  .catalogue-price>small{font-size:10px;letter-spacing:0}
  .catalogue-row>svg{grid-column:3;grid-row:1/3;width:21px;height:21px;margin:0}
  .catalogue-foot{flex-direction:column;font-size:9px;line-height:1.8;gap:12px;margin-top:24px}
  .catalogue-foot>a{min-height:44px;display:inline-flex;align-items:center;gap:10px;width:max-content;font-size:10px}
  .closing{padding:44px var(--gutter) 24px}
  .closing-top{align-items:flex-start;flex-direction:column;gap:24px;padding-bottom:28px}
  .closing-top>.small-label{font-size:10px;line-height:1.8;letter-spacing:.4px}
  .closing-contact{font-size:44px;line-height:1.1;gap:22px;padding:0;letter-spacing:-1px}
  .closing-contact>span{font-size:29px}
  .closing-word{font-size:clamp(28px,10.7vw,72px);line-height:1.3;letter-spacing:-.065em;margin-top:30px}
  .closing-word>span{font-size:.55em;vertical-align:middle;margin:0 0 0 12px}
  .closing footer{flex-direction:column;align-items:flex-start;gap:18px;font-size:9px;line-height:1.7;margin-top:28px;padding-top:26px}
  .closing footer>span:nth-child(2){width:auto;order:initial}
  .closing footer>a{min-height:44px;display:inline-flex;align-items:center;gap:10px;font-size:10px}
  .chapter-nav{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));transform:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding:4px;background:#171714f5;border-color:#eee8dc3b;border-radius:0}
  .chapter-nav a{min-width:0;min-height:48px;padding:6px 2px;font-size:10px;gap:5px;flex-direction:column;justify-content:center}
  .chapter-nav a b,.chapter-nav a.current b{display:block;max-width:100%;font-size:8px;line-height:1.4;letter-spacing:0}
  .chapter-nav a>span>.ui-icon{width:11px;height:11px}

  .product-page main{padding:24px var(--gutter) 0}
  .product-breadcrumb{font-size:11px;line-height:1.7;gap:10px;margin-bottom:34px}
  .product-breadcrumb>a{min-height:44px}
  .product-grid{display:flex;flex-direction:column;gap:44px}
  .product-grid>*{width:100%}
  .product-eyebrow,.section-eyebrow,.sample-label{font-size:10px;line-height:1.8;letter-spacing:.3px}
  .product-intro h1{font-size:clamp(34px,9.2vw,61px);line-height:1.12}
  .product-lead{font-size:16px;line-height:1.8;margin-top:24px}
  .product-highlights{flex-direction:column;gap:13px;font-size:13px;line-height:1.6;margin-top:24px}
  .product-highlights li:before{flex-basis:11px;width:11px}
  .purchase-card{position:relative;inset:auto;--purchase-pad:22px}
  .purchase-art{height:170px;margin-bottom:24px}
  .purchase-name{font-size:20px;margin-bottom:22px}
  .purchase-label{font-size:10px;line-height:1.6}
  .purchase-price{font-size:52px;line-height:1.3}
  .purchase-price small{font-size:12px}
  .purchase-status{font-size:10px;line-height:1.7;margin-top:12px;padding-top:16px}
  .purchase-card>p{font-size:14px;line-height:1.8;margin:20px 0}
  .purchase-example,.purchase-contact{font-size:14px;min-height:52px;gap:16px;line-height:1.5}
  .story-block h2{font-size:28px;line-height:1.3;letter-spacing:-1px}
  .product-benefits li{gap:17px;padding:24px 0}
  .benefit-number{font-size:11px;margin-top:5px}
  .product-benefits h3{font-size:18px;line-height:1.5}
  .product-benefits p,.product-fit p,.product-questions p,.product-questions details>p{font-size:15px;line-height:1.8}
  .deal-example,.gap-example,.planned-example{padding:22px}
  .deal-heading,.gap-heading{gap:12px;align-items:flex-start}
  .deal-heading>span,.gap-heading>span{font-size:21px;line-height:1.5}
  .deal-heading>strong,.gap-heading>strong{font-size:48px}
  .deal-heading small,.gap-heading small{font-size:9px;line-height:1.7;letter-spacing:0}
  .product-example dl>div{font-size:13px;line-height:1.7;gap:12px}
  .product-example dd{white-space:nowrap}
  .product-example p{font-size:14px;line-height:1.8}
  .terminal-example{padding:16px}
  .terminal-example .sample-label{font-size:9px}
  .terminal-example button>span{font-size:12px;min-height:44px;display:flex;align-items:center;justify-content:flex-end;gap:9px;margin-top:8px}
  .product-fit{padding-left:20px}
  .product-questions summary{font-size:15px;line-height:1.7;min-height:60px;gap:18px;padding:20px 0}
  .product-questions details>p{padding-right:0}
  .product-cross-sell{margin-top:54px;flex-direction:column;align-items:flex-start;gap:16px}
  .product-cross-sell p{font-size:32px;line-height:1.3}
  .product-cross-sell a{font-size:14px;line-height:1.6;min-height:48px}
  .product-page>footer{margin-inline:var(--gutter);font-size:9px;line-height:1.8;flex-direction:column;align-items:flex-start;gap:14px}
  dialog.image-dialog{width:calc(100vw - 24px);max-width:none;max-height:calc(100dvh - 24px)}
  .image-dialog .dialog-inner{padding:56px 18px 22px}
  .image-dialog .dialog-close{width:44px;height:44px;right:10px;top:8px}
  .image-dialog .dialog-kicker{font-size:9px;line-height:1.8}
  .image-dialog .dialog-inner h2{font-size:32px;line-height:1.2}
  .image-dialog .dialog-note{font-size:12px;line-height:1.8}
}
@media(max-width:360px){
  :root{--gutter:18px}
  .terminal-titlebar{font-size:7px;padding:9px 8px;gap:6px}
  .signal-note>span:last-child{width:100%;margin-left:0;text-align:left}
  .found-notification{padding:17px;gap:11px}
}
@media(max-width:900px) and (max-height:500px){
  .sculpture-shell{height:260px}
  .hero-heading{max-width:580px}
}