/* Suiza Clara — final responsive layout QA
   Visual-only overrides. No product logic or DOM mutation. */

:root{
  --sc-gutter:24px;
  --sc-section-y:clamp(68px,7vw,96px);
  --sc-section-y-sm:clamp(46px,5vw,64px);
  --sc-card-pad:clamp(20px,2.2vw,28px);
  --sc-content-reading:760px;
}

html{
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-padding-top:94px;
}
body{overflow-x:hidden}
main,section,header,footer,nav,aside,article,div{min-width:0}
img,svg,video,canvas{height:auto}
button,input,select,textarea{max-width:100%}
textarea{line-height:1.5}
[id]{scroll-margin-top:94px}

/* Global horizontal rhythm */
.container{width:min(calc(100% - (var(--sc-gutter) * 2)),var(--max))}
.section{padding-block:var(--sc-section-y)}
.section-sm{padding-block:var(--sc-section-y-sm)}
.page-hero{padding:clamp(52px,5.5vw,68px) 0 clamp(38px,4vw,50px)}
.page-hero .lede{max-width:760px;line-height:1.65}
.hero-meta{row-gap:8px}

/* Typography: prevent awkward overflow while preserving the editorial scale */
h1,h2,h3,h4,.display,.decision-question,.command-question{
  overflow-wrap:break-word;
  text-wrap:balance;
}
p,.lede,.help,.meta,.notice,.source-box,.warning{
  overflow-wrap:break-word;
}
.lede{line-height:1.65}
.section-head{margin-bottom:clamp(28px,3vw,38px)}
.section-head>p{line-height:1.65}
.article-section p,.guide-article .article-section p{max-width:var(--sc-content-reading)}

/* Header/nav: stable dimensions and tap targets */
.site-header{isolation:isolate}
.nav{gap:clamp(14px,2vw,24px)}
.nav-links{gap:clamp(14px,1.65vw,22px)}
.nav-tools{flex:0 0 auto}
.nav-search,.menu-toggle,.more-toggle{min-height:42px}
.brand{min-width:0}
.brand>span:last-child{min-width:0}
.mobile-panel{overscroll-behavior:contain;padding-bottom:max(24px,env(safe-area-inset-bottom))}

/* Cards / panels: consistent interior spacing */
.card,.form-card,.salary-control,.salary-context,.offer-form,.offer-results,
.prof-benchmark,.prof-top-canton,.compare-pro-card,.rumor-card,.method-card,
.community-method,.community-zero,.fact-card,.decision-results,.plan-profile{
  min-width:0;
}
.card{padding:var(--sc-card-pad)}
.actions{align-items:center}
.btn{line-height:1.2;text-align:center;white-space:normal}
.pill{line-height:1.25}

/* Forms */
.form-grid,.compare-pro-controls,.result-kpi-grid,.de-kpis,.de-reasons,
.market-range-values,.salary-mini-three,.prof-mini-salaries{min-width:0}
.field{min-width:0}
.field>span,.field label{line-height:1.35}
.input{min-height:48px;line-height:1.25}
select.input{padding-right:36px}
.help{line-height:1.45}
.notice{line-height:1.55}

/* Prevent common grid blow-outs */
.grid>*,.market-grid>*,.feature-six>*,.question-grid>*,.budget-columns>*,
.compare-grid>*,.compare-pro-grid>*,.roadmap-grid>*,.methodology-grid>*,
.cost-scenarios>*,.salary-triplet>*,.foreign-stats>*,.ticker-grid>*,
.footer-grid>*,.source-grid>*,.community-summary>*{min-width:0}

/* Tables keep their own horizontal scroll instead of expanding the page */
.table-wrap,.salary-table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
}
.table-wrap table,.salary-table-wrap table{margin:0}
.salary-table th,.salary-table td,.data-table th,.data-table td{vertical-align:middle}

/* Footer had five children but only four explicit columns. */
.footer-grid{
  grid-template-columns:minmax(250px,1.25fr) repeat(4,minmax(120px,.55fr));
  gap:clamp(24px,3vw,42px);
  align-items:start;
}
.footer-col{min-width:0}
.footer-col a{line-height:1.4}
.footer-bottom{align-items:flex-start}

/* Home */
.final-hero-grid{align-items:center}
.final-copy{min-width:0}
.hero-command{max-width:100%}
.command-output>div{min-width:0}
.command-output b{overflow-wrap:anywhere}
.wow-card p,.market-card p,.profession-market-card p{line-height:1.55}
.market-card-foot{align-items:flex-end}

/* Decision engine */
.de-rank,.decision-summary,.de-detail-head,.rank-row{min-width:0}
.de-rank b,.de-rank small,.de-rank em{overflow-wrap:anywhere}
.de-rank strong{white-space:nowrap}
.de-detail-head>*{min-width:0}

/* Offer analyzer */
.offer-v3>*{min-width:0}
.offer-breakdown>div,.result-line,.compare-pro-rows>div,.scenario-card>div{
  align-items:baseline;
}
.offer-breakdown span,.result-line span,.compare-pro-rows span,.scenario-card>div span{
  min-width:0;
  overflow-wrap:anywhere;
}
.offer-breakdown b,.result-line strong,.compare-pro-rows b,.scenario-card>div b{flex:0 0 auto;text-align:right}
.market-range-head>*{min-width:0}

/* Cantons / professions */
.canton-facts>div,.salary-triplet>div,.scenario-card,.scenario-insight{min-width:0}
.salary-triplet strong,.scenario-card>strong,.prof-benchmark h2,.prof-top-canton h2{overflow-wrap:anywhere}
.prof-mini-salaries>div,.salary-mini-three>div{min-width:0}
.prof-mini-salaries strong,.salary-mini-three b{overflow-wrap:anywhere}

/* Atlas */
.atlas>*{min-width:0}
.atlas-stage{max-width:100%}
.map-tooltip{
  max-width:min(270px,calc(100% - 24px));
  min-width:0;
  width:max-content;
}

/* Ask/search */
.ask-box{max-width:100%}
.ask-actions{flex-wrap:wrap}
.search-overlay{padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right))}
.search-modal{width:min(760px,100%)}
.search-result>*{min-width:0}
.search-result b,.search-result small{overflow-wrap:anywhere}

/* Medium desktop / tablet */
@media(max-width:1180px){
  :root{--sc-gutter:22px}
  .footer-grid{grid-template-columns:minmax(240px,1.2fr) repeat(2,minmax(150px,.65fr));row-gap:32px}
  .footer-brand{grid-row:span 2}
}

@media(max-width:980px){
  html{scroll-padding-top:78px}
  [id]{scroll-margin-top:78px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1;grid-row:auto;max-width:620px}
  .section-head{gap:18px}
}

/* Phone / small tablet */
@media(max-width:760px){
  :root{
    --sc-gutter:16px;
    --sc-section-y:56px;
    --sc-section-y-sm:42px;
    --sc-card-pad:20px;
  }

  html{scroll-padding-top:74px}
  [id]{scroll-margin-top:74px}

  .nav{height:66px;gap:10px}
  .nav-tools{gap:6px}
  .nav-tools .btn-sm{padding-inline:10px}
  .mobile-panel{inset:66px 0 0;padding:14px 16px 24px}
  .mobile-group{padding:8px 0}
  .mobile-group>b{padding-inline:4px}
  .mobile-group>a{padding:10px 4px!important;font-size:1rem}

  .hero-final,.hero{padding-top:42px}
  .page-hero{padding:38px 0 30px}
  .breadcrumbs{margin-bottom:18px;flex-wrap:wrap}
  .page-hero h1{font-size:clamp(2.45rem,12vw,3.2rem);line-height:.98}
  .page-hero .lede{font-size:1rem;margin-top:16px}
  .hero-meta{margin-top:18px}
  .final-copy .display,.display{font-size:clamp(3rem,16vw,4.4rem);line-height:.88}
  .final-hero-grid{gap:34px}
  .hero-command{padding:20px;border-radius:24px;transform:none}
  .command-question{font-size:clamp(1.4rem,7vw,1.75rem);padding:34px 0 24px}
  .command-output>div{grid-template-columns:34px minmax(0,1fr) auto;gap:8px;padding:14px 0}
  .command-output strong{font-size:1.2rem}

  .section-head{margin-bottom:26px;gap:12px}
  .section-head h2{font-size:clamp(2rem,10vw,2.75rem)}
  .section-head>p{font-size:.94rem}

  .card,.form-card,.salary-control,.salary-context,.offer-form,.offer-results,
  .prof-benchmark,.prof-top-canton,.decision-results,.fact-card,.scenario-card,.scenario-insight{
    border-radius:20px;
  }

  .actions{gap:8px}
  .actions .btn{flex:1 1 180px}
  .btn{min-height:46px;padding-inline:14px}
  .input,button,select,textarea{font-size:16px}
  .help{font-size:.72rem}

  .ticker-grid>div{padding:15px 14px}
  .ticker b{font-size:1.4rem}

  .wow-card{min-height:0;padding:22px}
  .wow-card h3{margin:28px 0 10px;font-size:1.55rem}

  .decision-form{padding:20px}
  .decision-placeholder{min-height:420px;padding:24px;border-radius:22px}
  .decision-placeholder h2{font-size:clamp(2rem,10vw,2.65rem)}
  .decision-results{padding:20px}
  .decision-summary{gap:14px}
  .decision-summary h2{font-size:2rem}
  .decision-detail{padding:18px}
  .de-detail-head{flex-direction:column;gap:8px}
  .de-rank{gap:8px}

  .offer-form,.offer-results{padding:20px}
  .offer-score{gap:14px}
  .offer-score h2{font-size:1.9rem}
  .market-range-values{gap:6px}
  .market-range-values>div{padding:9px 8px}
  .result-kpi-grid{padding:18px 0}

  .salary-main{padding:20px;border-radius:22px}
  .salary-main h2{font-size:1.9rem}
  .salary-triplet>div{padding:15px}
  .scenario-card,.scenario-insight{padding:18px}
  .scenario-card>strong{font-size:2rem}
  .prof-benchmark,.prof-top-canton{padding:20px}
  .prof-benchmark h2,.prof-top-canton h2{font-size:2.35rem}
  .salary-control,.salary-context{padding:20px}
  .salary-big-output{margin:20px 0;padding:20px}
  .salary-big-output strong{font-size:clamp(2.6rem,14vw,3.3rem)}

  .table-wrap,.salary-table-wrap{border-radius:14px}
  .salary-table th,.salary-table td,.data-table th,.data-table td{padding:12px 13px}

  .atlas-stage{height:min(520px,70vh);border-radius:22px}
  .atlas-controls,.atlas-ranking{border-radius:20px}
  .map-tooltip{width:min(240px,calc(100% - 20px));max-width:calc(100% - 20px)}

  .ask-box{padding:20px;border-radius:22px}
  .ask-box h2{font-size:clamp(1.9rem,9vw,2.4rem)!important}
  .ask-actions{align-items:stretch}
  .ask-actions small{width:100%}
  .ask-actions .btn{width:100%}
  .search-overlay{padding-top:7vh}
  .search-input-wrap{padding:12px}
  .search-results{padding:6px}
  .search-result{grid-template-columns:38px minmax(0,1fr);gap:10px;padding:10px}
  .search-result>*:last-child:not(:nth-child(2)){grid-column:2}

  .footer-grid{grid-template-columns:1fr 1fr;gap:28px 20px}
  .footer-brand{grid-column:1/-1}
  .site-footer{padding:46px 0 24px}
  .footer-bottom{margin-top:34px}
}

@media(max-width:560px){
  :root{--sc-gutter:14px;--sc-section-y:52px;--sc-card-pad:18px}

  .brand-mark{width:32px;height:32px}
  .nav-search{width:42px;justify-content:center;padding:0}
  .nav-tools .btn-sm{font-size:.7rem}

  .page-hero h1{font-size:clamp(2.25rem,12vw,2.9rem)}
  .eyebrow{font-size:.64rem;letter-spacing:.11em}
  .pill{font-size:.68rem;padding:6px 9px}

  .kpi{padding:18px 14px}
  .kpi strong{font-size:1.55rem}

  .footer-grid{grid-template-columns:1fr}
  .footer-brand{grid-column:auto}
  .footer-col{padding-top:4px}
  .footer-bottom{gap:10px}

  .foreign-stats{grid-template-columns:1fr}
  .foreign-stats>div{border-right:0!important}
  .foreign-stats>div:last-child{border-bottom:0}

  .salary-mini-three,.prof-mini-salaries{grid-template-columns:1fr}
  .profession-econ .salary-triplet{grid-template-columns:1fr}
  .market-range-values{grid-template-columns:1fr}
  .salary-values{grid-template-columns:1fr}
  .interpret-facts{grid-template-columns:1fr}
  .interpret-facts>div{border-right:0;border-bottom:1px solid var(--line)}
  .interpret-facts>div:last-child{border-bottom:0}

  .decision-summary{grid-template-columns:1fr}
  .score-badge{width:74px;height:74px;justify-self:start}
  .de-rank{grid-template-columns:26px minmax(0,1fr) auto}
  .de-rank strong{font-size:.95rem}

  .plan-hero{grid-template-columns:1fr}
  .plan-orb{justify-self:start}

  .source-stack{grid-template-columns:1fr 1fr;transform:none}
  .myths-legend>span{grid-template-columns:10px 62px minmax(0,1fr)}

  .community-summary{grid-template-columns:1fr}
  .community-summary .pill{grid-column:auto}
  .community-aggregate-table>div{grid-template-columns:1fr}
  .community-aggregate-table b,.community-aggregate-table small{text-align:left}

  .ask-examples{display:grid;grid-template-columns:1fr}
  .ask-examples button{text-align:left;border-radius:12px;padding:10px 12px}
}

@media(max-width:380px){
  :root{--sc-gutter:12px}
  .nav-tools .btn-sm{display:none}
  .final-copy .display,.display{font-size:clamp(2.75rem,15vw,3.5rem)}
  .page-hero h1{font-size:2.2rem}
  .kpi-strip{grid-template-columns:1fr}
  .kpi+.kpi{border-left:0;border-top:1px solid var(--line)}
  .ticker-grid{grid-template-columns:1fr}
  .ticker-grid>div:nth-child(5){grid-column:auto}
}

/* Keyboard focus without changing visual language */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(223,28,54,.28);
  outline-offset:3px;
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}