/* =========================
 * 变量
 * ======================= */
:root{
  /* 色彩 */
  --blue:#0000fd;
  --ink:#0b1220;
  --muted:#979797;
  --bg:#f5f7fa;
  --card:#ffffff;
  --ring:#000;


  --hero-height: clamp(240px, calc(100vw * 521 / 2047), 420px);
  --hero-overlap: calc(var(--hero-height) / 8);
  --topbar-height: 108px;


  --center-gap: 32px;         
  --calc-content-width: 500px; 
  --calc-right-gap: 48px;      


  --control-height: 42px;
  --control-radius: 5px;
  --control-font: 18px;


  --font-sans: "SKF Sans", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", "PingFang SC",
               "Microsoft YaHei", sans-serif;

  --side-gutter: 12px;
}


 * ======================= */
@font-face { font-family:"SKF Sans"; src:local("SKFSansOffice-Light"),url("https://4611544.fs1.hubspotusercontent-eu1.net/hubfs/4611544/raw_assets/public/fonts/SKFSansOffice-Light.ttf") format("truetype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"SKF Sans"; src:local("SKFSansOffice-Regular"),url("https://4611544.fs1.hubspotusercontent-eu1.net/hubfs/4611544/raw_assets/public/fonts/SKFSansOffice-Regular.ttf") format("truetype"); font-weight:350; font-style:normal; font-display:swap; }
@font-face { font-family:"SKF Sans"; src:local("SKFSansOffice-Medium"),url("https://4611544.fs1.hubspotusercontent-eu1.net/hubfs/4611544/raw_assets/public/fonts/SKFSansOffice-Medium.ttf") format("truetype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"SKF Sans"; src:local("SKFSansOffice-Bold"),url("https://4611544.fs1.hubspotusercontent-eu1.net/hubfs/4611544/raw_assets/public/fonts/SKFSansOffice-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; }
/* @font-face { font-family:"SKF Sans"; src:local("SKFSansOffice-LightItalic"),url("https://4611544.fs1.hubspotusercontent-eu1.net/hubfs/4611544/raw_assets/public/fonts/SKFSansOffice-LightItalic.ttf") format("truetype"); font-weight:300; font-style:italic; font-display:swap; } */
/* @font-face { font-family:"SKF Sans"; src:local("SKFSansOffice-Italic"),url("https://4611544.fs1.hubspotusercontent-eu1.net/hubfs/4611544/raw_assets/public/fonts/SKFSansOffice-Italic.ttf") format("truetype"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"SKF Sans"; src:local("SKFSansOffice-MediumItalic"),url("https://4611544.fs1.hubspotusercontent-eu1.net/hubfs/4611544/raw_assets/public/fonts/SKFSansOffice-MediumItalic.ttf") format("truetype"); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:"SKF Sans"; src:local("SKFSansOffice-BoldItalic"),url("https://4611544.fs1.hubspotusercontent-eu1.net/hubfs/4611544/raw_assets/public/fonts/SKFSansOffice-BoldItalic.ttf") format("truetype"); font-weight:700; font-style:italic; font-display:swap; }
 */
/* =========================

 * ======================= */
*{ box-sizing:border-box; }
html,body{
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font-family: inherit; }
body{ margin:0; color:var(--ink); background:var(--bg); }

/* 可访问性隐藏 */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}


.topbar{ height:auto; display:flex; align-items:flex-start; padding-right:16px; }
.topbar .logo{ height:36px; width:auto; display:block; margin:36px 0 36px 36px; }


.hero{ width:100%; aspect-ratio:2047/521; background:#0b2c57; }
.hero-img{ position:static; display:block; width:100%; height:auto; object-fit:contain; }


.card{
  max-width:1800px;
  margin:calc(-2 * var(--hero-overlap)) auto 0;
  padding:0 12px;
  position:relative; z-index:2;
}
.card-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:0;
  align-items:center;
  background:var(--card);
  border-radius:0;
  box-shadow:0 12px 30px rgba(11,18,32,.10);
  overflow:hidden;
}

.card, .scaler {
  margin-bottom: 48px; 
  overflow: visible;  
  z-index: 1;
}


.product-visual{
  display:grid; place-items:center;
  min-height:440px; background:#fff; position:static;
}
.product-visual img{
  display:block; max-width:92%; max-height:520px; height:auto;
  object-fit:contain; margin:0; transform:translateY(8%);
}

.calc{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:36px var(--calc-right-gap) 36px var(--center-gap);
  gap:12px; width:100%;
}
.calc > *{ max-width: var(--calc-content_width, var(--calc-content-width)); width:100%; margin-left:0; }

.calc-footnote{
  margin: 6px 0 0 0;      /* 与按钮的垂直间距 */
  font-size: 12px;      /* 小号文字 */
  line-height: 1.4;
  color: var(--muted);  /* 与页面次要文字一致的灰色 */
}

.cta-group{
  display: flex;
  flex-direction: column;
  gap: 6px;              /* 按钮与脚注的间距，你可按需调 */
}

.title{ margin:0; font-size:30px; font-weight:600; line-height:1.25; }
.hint{ color:#000; font-size:17px; line-height:1.25; margin:0; }
.label{ display:block; font-size:16px; color:var(--muted); margin:0 0 6px; }


.select-row{ position:relative; display:flex; align-items:stretch; gap:8px; }
.select-row select{
  flex:1; min-width:0; box-sizing:border-box;
  min-height:var(--control-height); height:var(--control-height);
  padding:0 12px; border:1px solid var(--ring); border-radius:var(--control-radius);
  background:#fff; font:inherit; font-size:var(--control-font); line-height:normal;
  -webkit-appearance:none; appearance:none;
}
.select-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:var(--control-height);
  border:1px solid var(--ring); border-radius:var(--control-radius);
  background:var(--blue); color:#fff; font-size:16px; line-height:1; cursor:pointer;
}
.select-btn:active{ filter:brightness(.95); }
.select-short{ display:none!important; }


.inputs{ display:flex; gap:16px; }
.inputs > .field{ flex:1 1 0; min-width:0; }


.input-with-unit{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  height:var(--control-height);
  border:1px solid var(--ring); border-radius:var(--control-radius);
  background:#fff; gap:6px;
}
.input-with-unit input{
  grid-column:1; width:100%; border:0; border-radius:inherit;
  padding:0 12px; font-size:var(--control-font);
  background:transparent; min-width:0;
}
.input-with-unit .unit{
  grid-column:2; padding:0 10px; font-weight:600; color:#6b7280; white-space:nowrap;
  background:transparent;
}

.cta{
  height:var(--control-height);
  padding:0 16px; width:100%;
  background:var(--blue); color:#fff; border:none;
  border-radius:var(--control-radius);
  font-size:18px; font-weight:500; cursor:pointer;
}
.cta:hover{ filter:brightness(.95); }


.results{ display:grid; grid-template-columns:1fr; gap:18px; margin-top:18px; border-top:none; padding-top:0; }
.res{ display:flex; align-items:center; gap:18px; }
.res-icon{ width:40px; height:40px; border-radius:50%; background:transparent; display:grid; place-items:center; overflow:hidden; }
.res-icon img{ width:100%; height:100%; object-fit:contain; }
.res-text{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.res-value .res-num, .res-value .res-unit{ font-size:28px; font-weight:500; line-height:1.1; color:#000; }
.res-label{ font-size:22px; font-weight:500; color:var(--muted); margin-left:8px; }


.select-menu{
  position:absolute; z-index:50; margin-top:0; background:#fff;
  border:1px solid var(--ring); border-radius:var(--control-radius);
  box-shadow:0 12px 30px rgba(11,18,32,.12);
  max-height:260px; overflow:auto; padding:4px 0;
}
.select-option{
  display:block; width:100%; text-align:left; padding:10px 12px;
  background:transparent; 
  border:0; font:inherit; line-height:1.3; cursor:pointer;
}
.select-option:hover, .select-option:focus{ background:#f2f4f7; outline:none; }
.select-option[aria-selected="true"]{ background:#e9eefc; }

.input-with-unit input[type="number"]{
  appearance:textfield; -moz-appearance:textfield; -webkit-appearance:none;
}
.input-with-unit input[type="number"]::-webkit-outer-spin-button,
.input-with-unit input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}

.input-with-unit:focus-within{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(10,52,255,.15); }
.input-with-unit input[type="number"]:focus{ outline:none; }

.select-row select{
  pointer-events: none; 
  user-select: none;     
}

:root{
  --ring:#D0D5DD;            
}


.input-with-unit:focus-within{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(10,52,255,.15);
}


.input-with-unit input:focus,
.input-with-unit input:focus-visible,
.select-row select:focus,
.select-row select:focus-visible,
.select-btn:focus,
.select-btn:focus-visible{
  outline:none;
  box-shadow:none;
}



/* ===== Mobile (≤768px) — Cleaned ===== */
@media (max-width:768px){
  /* ---------- Vars ---------- */
  :root{
    --head-pad-y: 18px;
    --head-gap-x: 10px;
    --mobile-content: clamp(260px, 88vw - 2*var(--head-gap-x), 420px);

    --bearing-max: 320px;
    --bearing-h-max: 200px;

    --ctrl-h: 40px;
    --ctrl-font: 16px;
    --ctrl-radius: 8px;
    --select-btn-w: 32px;

    --title-nudge: 28px;
    --title-gap: 4px;
    --rail: max(0px, calc((100% - var(--mobile-content)) / 2));
  }

  /* ---------- Topbar ---------- */
  .topbar{ height:72px; display:flex; align-items:center; justify-content:center; padding:0; }
  .topbar .logo{ height:24px; width:auto; margin:0; }

  /* ---------- Layout ---------- */
  .card{ margin:-28px auto 20px; padding:0 12px; }
  .card-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "title   img"
      "select  img"
      "hint    hint"
      "inputs  inputs"
      "cta     cta"
      "results results";
    align-items:start;
    column-gap:8px !important;
    row-gap:0 !important;

    padding-left:  calc(var(--head-gap-x) + env(safe-area-inset-left, 0px) + var(--rail)) !important;
    padding-right: calc(var(--head-gap-x) + env(safe-area-inset-right, 0px) + var(--rail)) !important;
    margin-inline:auto;
  }

  .calc{ display:contents; padding:0 !important; }


  .title{
    grid-area:title;
    justify-self:start;
    width:min(100%, var(--mobile-content));
    margin-top: calc(var(--head-pad-y) + var(--title-nudge)) !important;
    margin-bottom: var(--title-gap) !important;
    margin-left:0 !important;
    text-align:left;
    font-size:18px;
    font-weight:400; 
    font-style:normal;
    font-synthesis-weight:none;
    line-height:1.25;
    text-wrap:balance; white-space:normal; word-break:keep-all; hyphens:auto;
  }


  .select-row{
    grid-area:select;
    justify-self:start;
    width:min(100%, var(--mobile-content));
    margin:0;
    display:grid; grid-template-columns:1fr auto; gap:0 !important; min-width:0;
  }
  .select-row select{
    min-width:0;
    height:var(--ctrl-h) !important;
    min-height: var(--ctrl-h) !important;
    padding:0 12px;
    border-right:0 !important;
    border-top-right-radius:0 !important;
    border-bottom-right-radius:0 !important;
    border-radius:var(--ctrl-radius) !important;
    border-color:var(--muted) !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    font-size:14px !important;
    line-height:normal !important;
  }
  .select-row .select-btn{
    width:var(--select-btn-w); flex:none;
    height:var(--ctrl-h) !important;
    border-left:0 !important;
    border-top-left-radius:0 !important;
    border-bottom-left-radius:0 !important;
    border-radius:var(--ctrl-radius) !important;
    border-color:var(--muted) !important;
    padding:0 !important;
    display:inline-flex; align-items:center; justify-content:center;
  }

  /* ---------- Product visual ---------- */
  .product-visual{
    grid-area:img; justify-self:end; align-self:start;
    margin:var(--head-pad-y) 0; padding:0; background:transparent; min-height:0;
  }
  .product-visual img{
    width:auto !important; height:auto !important;
    max-height:var(--bearing-h-max) !important;
    max-width:min(34vw, var(--mobile-content), var(--bearing-max)) !important;
    object-fit:contain;
  }

  /* ---------- Text / Inputs ---------- */
  .hint{
    grid-area:hint;
    width:min(100%, var(--mobile-content));
    margin:36px 0 12px 0;
    font-size:13px; text-wrap:pretty; white-space:normal; word-break:keep-all; hyphens:auto;
  }
  .inputs{
    grid-area:inputs;
    width:min(100%, var(--mobile-content));
    margin:8px 0 0;
    display:grid; grid-template-columns:1fr 1fr; gap:12px;
  }
  .input-with-unit{
    height:var(--ctrl-h) !important;
    border-radius:var(--ctrl-radius) !important;
    border-color:var(--muted) !important;
    gap:0 !important;
    background-clip:padding-box;
    background:transparent !important;
  }
  .input-with-unit input{
    font-size:var(--ctrl-font) !important;
    line-height:calc(var(--ctrl-h) - 2px) !important;
  }
  .input-with-unit .unit{
    font-size:20px !important; font-weight:300; background:transparent;
  }

  /* ---------- CTA ---------- */
  .cta{
    grid-area:cta;
    width:min(100%, var(--mobile-content));
    margin:18px 0; padding:0 12px; box-sizing:border-box;
    height:var(--ctrl-h) !important;
    font-size:20px !important;
    line-height:normal !important;
    border-radius:var(--ctrl-radius) !important;
  }

  /* ---------- Results ---------- */
  .results{
    grid-area:results;
    width:min(100%, var(--mobile-content));
    margin:28px 0 100px; color:#000;
  }
  .res-icon{ width:30px; height:30px; }
  .res-value .res-num, .res-value .res-unit{ font-size:24px; font-weight:500; line-height:1.1; color:#000; }
  .res-label{ font-size:16px; font-weight:400; color:#000; margin-left:6px; }

 
  .title, .select-row, .hint, .inputs, .cta, .results{ position:relative; z-index:1; }

  /* ---------- Scaler ---------- */
  .scaler{
    position:relative; width:100%;
    display:flex; justify-content:center; align-items:flex-start; overflow:visible;
  }
  .scaler__content{ transform-origin:top center; will-change:transform; }
  .scaler__content .title, .scaler__content .label{ white-space:nowrap; }

  /* ---------- Field Labels ---------- */
  .label{ font-size:13px !important; line-height:1.2; font-weight:400; color:var(--muted); }
  .select-field > .label{ display:block !important; margin:0 0 6px; font-size:12px; line-height:1.2; color:var(--muted); font-weight:400; }


  .select-field, .select-row{ position:relative; z-index:5; }

  .select-menu{
    background:#fff !important;
    border:1px solid var(--muted) !important;
    box-shadow:0 12px 30px rgba(11,18,32,.12) !important;
    z-index:9999 !important;

    
    left:0 !important; right:auto !important;
    width:calc(100% + 140px) !important;
    max-width:96vw !important;

    max-height:260px; overflow:auto;
    backdrop-filter:none !important;
  }

  
  .select-option{
    display:grid !important; grid-template-columns:1fr; row-gap:2px; align-items:start;
    padding:12px 14px !important; min-height:44px;
    background:#fff !important; text-align:left; cursor:pointer; border:0;
    white-space:normal !important; overflow:hidden !important; line-height:1.35;
  }
  .select-option .opt-code{
    font-weight:700; line-height:1.2;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .select-option .opt-desc{
    font-size:13px; color:#4b5563; line-height:1.3;
    display:-webkit-box; 
    -webkit-line-clamp:2; 
    -webkit-box-orient:vertical; 
    overflow:hidden;
  }
  .select-option:hover, .select-option:focus{ background:#f2f4f7 !important; }
  .select-option[aria-selected="true"]{ background:#e9eefc !important; }
}

@media (min-width:769px){ .br-md{ display:none; } }
@media (max-width:768px){ .br-md{ display:inline; } }


@media (max-width:768px){
  .select-row{
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 0 !important; 
  }

 
  .select-row select{
    height: var(--ctrl-h) !important;
    border-color: var(--muted) !important;
    border-right: 0 !important;
    border-radius: var(--ctrl-radius) 0 0 var(--ctrl-radius) !important;
    background-clip: padding-box !important;  
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

 
  .select-row .select-btn{
    height: var(--ctrl-h) !important;
    width: var(--select-btn-w, 32px) !important;
    border-color: var(--muted) !important;
    border-left: 0 !important;
    border-radius: 0 var(--ctrl-radius) var(--ctrl-radius) 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center; justify-content: center;
  }
}


/* @media (max-width:768px){
  .results.results--compact .res-icon{ width:26px; height:26px; }
  .results.results--compact .res-value .res-num,
  .results.results--compact .res-value .res-unit{ font-size:20px; }
  .results.results--compact .res-label{ font-size:14px; }
} */



/*MMMMMMMMMMMMMMMobile/////////////////////////////////////////////////////////////////////////////////////////////////*/
@media (max-width:768px){
 
  .res{ align-items: flex-start; }


  .res-text{
    display: grid !important;
    grid-template-columns: auto 1fr;  
    column-gap: 10px;
    align-items: baseline;
    white-space: normal !important;    
  }


  .res-value{
    white-space: nowrap;               
  }
  .res-label{
    white-space: normal !important;    
    overflow-wrap: anywhere;           
    line-height: 1.3;
  }
}

@media (max-width:768px){
  
  .results{ --res-icon:30px; --res-gap:12px; }
  .res{
    display:grid !important;
    grid-template-columns: var(--res-icon) 1fr;
    column-gap: var(--res-gap);
    align-items: stretch;           
  }

  
  .res-icon{
    width:var(--res-icon); height:var(--res-icon);
    justify-self:center;
    align-self:center;              
  }

  
  .res-text{
    display:grid !important;
    grid-template-columns: auto 1fr;
    column-gap:10px;
    align-items:stretch;            
    white-space: normal !important; 
  }

  
  .res-value{
    align-self:center;              
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-variant-numeric: tabular-nums;
    line-height:1.1;
  }

  .res-label{
    align-self:start;               
    white-space: normal !important;
    overflow-wrap:anywhere;
    line-height:1.3;
  }
}

@media (max-width:768px){
  .res{
    display: grid !important;
    grid-template-columns: 30px 1fr;   
    column-gap: 8px;
    align-items: center;               
  }
  .res-icon{
    width: 30px; height: 30px;
    justify-self: center;
  }

  .res-text{
    display: grid !important;
    grid-template-columns: auto 1fr;    
    align-items: center !important;     
    white-space: normal !important;    
  }

  .res-value{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    align-self: center !important;      
  }

  .res-label{
    white-space: normal !important;
    overflow-wrap: anywhere;
    line-height: 1.3;
    align-self: center !important;      
  }
}

@media (max-width:768px){
  .results .res-icon{ width:26px; height:26px; }
  .results .res-value .res-num,
  .results .res-value .res-unit{ font-size:20px; }
  .results .res-label{ font-size:14px; }
}


@media (max-width:768px){
  .res-text{
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr); 
    column-gap: 6px;
  }

  .res-label{
    display: block;                
/*     white-space: nowrap !important;  */
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}

@media (max-width:768px){
  .cta-group{
    grid-area: cta;                              /* 关键：占用 cta 这一格 */
    width: min(100%, var(--mobile-content));
    justify-self: start;
    gap: 6px
  }
  .cta{               /* 按钮自身上下外边距更小 */
    margin: 12px 0 2px !important;
  }
  
  .cta-group .cta{ width: 100%; }                /* 保持按钮满宽 */
}

/* 脚注自身样式（你已有类似样式可保留/合并） */
.calc-footnote{
  margin:0 0 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

























.function{
  grid-column: 1 / -1;
  width: 100%;
  margin: 100px 0 100px;
}
.function-inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
.function-chart{
  --chart-max-h: 420px;
  width: 60%;
  margin: 0;
  padding: 0;
  justify-self: center;
  display: block;
  --pos-skf: 30%;
  --pos-other: 66%;
}
.function-title{
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 700;
  text-align: left;
}
/* .function-subtitle{
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 350;
  text-align: left;
} */
.function-media{ margin: 0; }
.function-media img{
  display: block;
  width: 100%;
  height: auto;
  max-height: var(--chart-max-h);
  object-fit: contain;
}
.chart-xaxis{
  position: relative;
  width: 100%;
  height: 22px;
  margin-top: 6px;
  font-size: 12px;
}
.function-chart .chart-xaxis span{
  position: absolute;
/*   bottom: 0; */
  transform: translateX(-50%);
/*   white-space: nowrap; */
  text-align: center;
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 18px;
}
.function-chart .chart-xaxis span:first-child{ left: var(--pos-skf); }
.function-chart .chart-xaxis span:last-child{ left: var(--pos-other); }
.function-copy{
  padding: 0 var(--calc-right-gap) 0 var(--center-gap);
  max-width: var(--calc-content_width, var(--calc-content-width));
  width: 100%;
  font-size: 20px;
}
.function-copy p{ margin: 0 0 10px; line-height: 1.6; }
.function-list{
  list-style: disc;
  padding-left: 1.25rem;
  margin: 24px 0 0;
  font-size: 16px;
}
.function-list li{
  margin: 0;
  line-height: 1.6;
  font-weight: 600;
}
.function-list li + p,
.function-list li > p{
  margin-top: 2px;
  margin-bottom: 28px;
  font-size: 16px;
  line-height: 1.6;
  color: #273342;
  opacity: .92;
}
.function-list p + li{ margin-top: 10px; }
.function .brand-blue,
.function .hl-blue{
  color: var(--blue, #0000fd) !important;
}
@media (min-width: 769px){
  .function{ --calc-content_width: 620px; }
  .function-copy{ max-width: var(--calc-content_width); }
}
@media (max-width:768px){
  .card-grid{
    grid-template-areas:
      "title   img"
      "select  img"
      "hint    hint"
      "inputs  inputs"
      "cta     cta"
      "results results"
/*       "function function"; */
  }
/*   .function{
    grid-area: function;
    margin: 8px 0 24px;
  } */
  .card-grid > .function{
    grid-column: 1 / -1;      /* 占满整行 */
    margin: 8px 0 24px;       /* 保留你原来的上下间距 */
  }
  
  .function-inner{
    grid-template-columns: 1fr;
    row-gap: 14px;
  }
  .function-chart,
  .function-copy{
    padding: 0;
    width: min(100%, var(--mobile-content));
    justify-self: center;
  }
  .function-chart{ --chart-max-h: 340px; --pos-skf: 27%; --pos-other: 65%; }
}




@media (max-width: 768px){
  .function-chart .chart-xaxis span{
    font-size: clamp(11px, 3.2vw, 16px); /* 跟随视口缩放的上/下限 */
    max-width: 46%;                      /* 每个标签可占的最大宽度 */
    line-height: 1.15;
    white-space: normal;                 /* 允许换行 */
    overflow: visible;                   /* 取消截断 */
    text-overflow: clip;                 /* 去掉 ... */
    word-break: break-word;              /* 长词必要时拆分 */
  }

  /* 你之前的移动端柱中心位置，保留或按需微调 */
  .function-chart{
    --pos-skf: 31%;
    --pos-other: 66%;
  }
}
















.faq{ padding:24px 0 0; }
.faq__container{ max-width:1420px; margin:0 auto; padding:0 16px; }
.faq-back{ display:inline-block; margin:8px 0 10px; color: var(--blue, #0000fd) !important; opacity:.7; text-decoration:none; font-weight:500; }
.faq-back:hover{ text-decoration:underline; }
.faq-title{ font-size:40px; font-weight:350; line-height:1.2; margin:8px 0 0; }


.faq-divider{
  height:68px;
  background:#f5f6f7;
  border-bottom:1px solid rgba(39,51,66,.15);
  margin:12px 0 8px;
}


.faq-h2{ font-size:28px; line-height:1.3; margin:36px 0 28px; }
.faq-qa{ border-bottom:1px solid rgba(39,51,66,.18); }
.faq-qa:first-of-type{ border-top:1px solid rgba(39,51,66,.18); }
.faq-qa > summary{
  list-style:none; cursor:pointer; user-select:none;
  padding:16px 8px; font-size:20px; line-height:24px; font-weight:500; position:relative;
}
.faq-qa > summary::-webkit-details-marker{ display:none; }
.faq-qa > summary::after{
  content:"▾"; position:absolute; right:6px; top:16px; font-size:16px; font-weight:350; opacity:.6; transition:transform .2s ease;
}
.faq-qa[open] > summary::after{ transform:rotate(180deg); }
.faq-a{ padding:0 8px 16px; font-size:18px; font-weight:300; color:#273342; opacity:.92; line-height:1.6; }

.faq-qa .faq-a{
  margin: 12px 0 22px;   
  padding: 0 8px;        
}


.faq-qa[open]{ 
  padding-bottom: 6px;   
}

.faq-qa[open] + .faq-qa{
  margin-top: 8px;
}
@media (max-width:768px){
  main.faq{margin-bottom:25px;}
  main.faq .faq-title{   font-size:clamp(28px, 5vw, 30px) !important; font-weight: 350 !important; margin-top: 48px;}
  main.faq .faq-h2{      font-size:clamp(22px, 4vw, 24px) !important; font-weight: 500 !important;}
  main.faq .faq-qa > summary{ font-size:15px !important; }
  main.faq .faq-qa .faq-a{    font-size:14px !important; }
}





/* === Mobile-only font sizes (≤768px) === */
@media (max-width:768px){
  /* 右列文案 */
  .function-copy{ font-size:16px; }
  .function-title{ font-size:18px; margin-bottom:20px; }
  .function-subtitle{ font-size:16px; }

  /* 列表与说明段 */
  .function-list{ font-size:14px; }
  .function-list li + p,
  .function-list li > p{ font-size:14px; }

  /* 图表块与下方留白 */
  .function-chart{ margin-bottom:20px; }

  /* 图表下两个标签：并排、不换行、必要时省略号 */
  .function-chart .chart-xaxis{
    display:grid;
    grid-template-columns:1fr 1fr;
    justify-items:center;
    align-items:start;
    gap:8px;            /* 缩小间距，防止挤压换行 */
    width:100%;
    margin-top:6px;
  }
  .function-chart .chart-xaxis span{
    display:block;
    width:100%;
    text-align:center;
/*     white-space:nowrap;       /* 不换行 */ */
    overflow:hidden;
    text-overflow:ellipsis;   /* 超出省略号 */
    word-break:keep-all;
    line-height:1.2;
    font-size:clamp(11px, 2.6vw, 13px);  /* 移动端更小的字号 */
  }
}

/* ===== FAQs 模块（放在 .function-copy 内） ===== */
/* 卡片本身保持直角与浅灰背景 */
.function-cta{
  margin-top: 24px;              /* 比之前略收紧一些，靠近 copy */
  padding: 16px 18px;
  background: #f5f6f8;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 0;
  display: grid;
  gap: 10px;
}

/* 标题保持原样（如需更深可改为 #111827） */
.function-cta__title{
  margin: 0;
  font-size: 18px;
  font-weight: 350;
  color: #111827;
}

/* 正文用更深的灰色，接近黑色以贴近原设计 */
.function-cta__desc{
  margin: 0;
  font-size: 14px;
  font-weight: 350;
  line-height: 1.6;
  color: #273342;      /* 深灰；想更黑可改 #111827 或 #0f172a */
}

/* “Read more” 按钮缩小、透明底 + 蓝色描边+蓝字（保持直角） */
.function-cta__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;                     /* ← 更小 */
  padding: 0 10px;                  /* ← 更小 */
  font-size: 13px;                  /* ← 更小 */
  font-weight: 500;
  background: transparent;
  color: var(--blue, #0B57FF);
  border: 1px solid currentColor;
  border-radius: 3px;               /* 若要完全直角可改为 0 */
  text-decoration: none;
  width: fit-content;
}

.function-cta__btn:hover{
  background: rgba(11, 87, 255, .06);
}

@media (max-width:768px){
  .function-cta{ margin-top: 18px; padding: 14px 16px; }
  .function-cta__title{ font-size: 16px; }
  .function-cta__desc{ font-size: 13px; }
  .function-cta__btn{
    height: 28px;                   /* 移动端再小一点 */
    padding: 0 8px;
    font-size: 12.5px;
  }
}


/* Mobile 微调 */
@media (max-width:768px){
  .function-cta{ margin-top: 20px; padding: 14px 16px; }
  .function-cta__title{ font-size: 16px; }
  .function-cta__desc{ font-size: 13px; }
  .function-cta__btn{ height: 34px; padding: 0 12px; }
}



















/* === VIDEO SECTION (Final, aligned & equal height) === */

/* .function-media {
  padding-top: 80px;
} */

.media-inner {
  /* padding-top: 80px; */
  /* padding-bottom: 80px; */
  display: grid;
  grid-template-columns: 1fr 1fr; /* 与上方 function-inner 保持一致 */
  align-items: stretch;           /* 强制两列等高 */
  column-gap: var(--center-gap);
}

/* 左列视频：占满容器，高度由右列同步拉伸 */
.media-player{
  margin-left: 150px;
  width: 80%;     
  justify-self: right;     /* ← 居中，左右边界与上方一致 */
  background: transparent;  /* ← 去掉黑底，避免误判“外侧黑边” */
}
/* .media-player {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000; 
} */

.media-video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: none;
}

.media-video-wrapper > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 右列 poster：等高、无边框、居中排版 */
.media-poster {
  /* padding: 0 var(--calc-right-gap) 0 var(--center-gap);  */
  max-width: var(--calc-content_width, var(--calc-content-width));

  /* width: 100%;                            */
  box-sizing: border-box;                /* ← padding 计入宽度，不再被“挤瘦” */
  min-width: 0;                          /* ← 允许在 Grid 内按需收缩 */
  justify-self: left;

  display: flex;
  align-items: center;
  background: #eef1f6;
  border: none;
  



  margin-left: var(--center-gap);
  margin-right: var(--calc-right-gap);

  /* 灰色块内部的留白，数值你可自己调 */
  padding: 24px;
}

.media-poster-box {
  max-width: var(--calc-content_width, var(--calc-content-width));
  width: 100%;
}


.media-title {
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 400;       /* SKF Sans Regular */
  font-size: 18px;        /* 18pt */
  /* line-height: 1.4; */
  color: #273342;
  /* white-space: nowrap !important; */
}
















.docs-inner{
  display: grid;
  grid-template-columns: 1fr 1fr; /* 与 .function-inner 相同 */
  column-gap: 0;                  /* 中线间距交给右列的 padding 控制 */
  align-items: start;
}


/* 左列：卡片宽度与 .function-chart 一致（60% 且居中） */
.docs-card{
  margin-left: 320px;
  width: 100%;
  height: 500px;
  justify-self: center;
  background: #eef1f6;
  border: 1px solid rgba(0,0,0,.06);
  padding: clamp(18px, 2.4vw, 28px);
  display: grid;
  gap: clamp(10px, 1.2vw, 16px);
  border: none;
}

/* 标题：SKF Sans Medium 20pt ≈ 26.7px */
.docs-title{
  padding-top: 50px;
  padding-left: 20px;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;             /* Medium */
  font-size: 20px;              /* 20pt ≈ 26.67px */
  line-height: 1.25;
}

/* 正文（你可按需要调整） */
.docs-desc{
  padding-top: 50px;
  padding-left: 20px;
  margin: 0;
  font-size: 18px;
  font-weight: 350;
  color: #273342;
  line-height: 1.6;
}

/* “Read more” 按钮：按照设计做成描边按钮；若要 18pt 可改成 24px */
.docs-btn{
  /* padding-top: 50px; */
  /* padding-left: 20px; */
  display: inline-flex;
  align-items: center;
  justify-content: center;                 
  font-size: 18px;                  
  font-weight: 350;
  background: transparent;
  color: var(--blue, #0B57FF);
  border: 1px solid currentColor;
  border-radius: 3px;               /* 若要完全直角可改为 0 */
  text-decoration: none;
  width: 120px;
  height: 40px; 

  justify-self: start;
  margin-top: 50px;
  margin-left: 20px;  
}
.docs-btn:hover{ background: rgba(11,87,255,.06); }

/* 右列：与 .function-copy 一样的对齐与最大宽度 */
.docs-download{
  margin-left: 220px;
  padding: 0 var(--calc-right-gap) 0 var(--center-gap);
  max-width: var(--calc-content_width, var(--calc-content-width));
  width: 100%;
  display: grid;
  gap: 12px;
  align-content: start;
}

/* 预览图：点击即可打开 PDF */
.docs-preview{
  display: block;
  width: 60%;
  background: #fff;
  box-shadow: 0 10px 24px rgba(11,18,32,.08);
}
.docs-preview img{
  display: block;
  width: 100%;
  height: auto;
}

/* 下载文字链接：SKF Sans Regular 18pt ≈ 24px */
.docs-link{
  font-family: var(--font-sans);
  font-weight: 350;             /* Regular */
  font-size: 18px;              /* 18pt */
  line-height: 1.35;
  color: #273342;
  text-decoration: underline;
  text-underline-offset: 3px;
}




/* 手机端布局：视频区域 + FAQs / Flyer */
@media (max-width: 768px) {

  /* ===== 视频区域：player + 标题在同一张灰色卡片里 ===== */

  .function-media {
    padding: 8px 0 0 0;
  }

  .function.function-media{
    margin-bottom: 0;
  }


  /* 整个视频模块的一张灰色卡片 */
  .function-media .media-inner {
    display: grid;
    grid-template-columns: 1fr;          /* 单列堆叠：上视频，下标题 */
    row-gap: 4px;
    padding: 8px;    /* 左右与正文对齐 */
    background: var(--bg);                 /* 灰色背景给整块 */
    box-sizing: border-box;
  }

  .function-media .media-player {
    margin: 0;                           /* 清掉桌面的 margin-left */
    width: 100%;
    justify-self: stretch;
    background: transparent;
  }

  .function-media .media-video-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  /* 标题区域只做内边距，不再单独涂灰色 */
  .function-media .media-poster {
    margin: 0;
    padding: 0 0 0 0;
    background: transparent;
    box-sizing: border-box;
  }

  .function-media .media-title {
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
  }


  /* ===== FAQs + Flyer：一行两列，各占一半 ===== */

  .function-docs {
    padding: 12px 0 40px;
  }

  .function-docs .docs-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 左右各 1/2 宽 */
    column-gap: var(--side-gutter);
    row-gap: 0;
    /* padding: 0 var(--side-gutter); */
    align-items: stretch;   /* ← 关键：让左右两块在这一行里等高 */
  }

  /* 左右两块共同重置：去掉桌面的 margin / 固定高度 */
  .function-docs .docs-card,
  .function-docs .docs-download {
    margin: 0;
    width: 100%;
    height: auto;
    box-sizing: border-box;
  }

  /* 左侧 FAQs 卡片：灰底 + 文本 + 按钮 */
  .function-docs .docs-card {
    background: var(--bg);
    padding: 20px 20px;
    display: grid;
    gap: 4px;
    margin: 0;
  }

  .function-docs .docs-title {
    padding: 42px 0 0 0;
    margin:0 0 0 0;
    font-size: 14px;
    font-weight: 700;
  }

  .function-docs .docs-desc {
    padding: 0;
    font-size: 12px;
  }

  .function-docs .docs-btn {
    margin: 0;
    font-size: 12px;
    width: auto;
    height: 24px;
    padding: 12px 12px 12px 12px;
  }

  /* 右侧 Flyer：图片 + 下载文字 */
  .function-docs .docs-download {
    gap: 0;
    padding: 0;
    background: transparent;
    align-content: flex-start;
  }

  .function-docs .docs-preview {
    width: 100%;          /* 图片占满右侧列 */
  }

  .function-docs .docs-link {
    display: block;
    margin-top: 0;
    font-size: 9px;
  }
}