/* Then & Now — visual system */
.tn-page{background:#f5f7fb;min-height:100vh;padding-bottom:1px}
.tn-shell{width:min(100% - 32px,1120px);margin:0 auto}
.tn-hero{padding:58px 0 44px;background:linear-gradient(135deg,#f1f6ff 0%,#fff 72%);border-bottom:1px solid #e1e6ef}
.tn-eyebrow,.eyebrow{display:block;font-size:.72rem;letter-spacing:.16em;font-weight:800;color:#2e6cae;margin-bottom:10px}
.tn-hero h1{font-size:clamp(2.5rem,5vw,4.3rem);line-height:1.02;margin:.1em 0 .25em;color:#182335}
.tn-lead{max-width:720px;font-size:1.08rem;line-height:1.65;color:#667386}
.tn-actions,.tn-detail-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.tn-button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 18px;border-radius:8px;background:#2f6eae;color:#fff;text-decoration:none;font-weight:700}
.tn-button:hover{filter:brightness(.95)}
.tn-button-light{background:#fff;color:#2f6eae;border:1px solid #cbd8e8}
.tn-section{padding:42px 0}
.tn-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tn-panel,.tn-empty,.tn-how,.tn-feature,.tn-entry-card{background:#fff;border:1px solid #dfe5ee;border-radius:16px;box-shadow:0 8px 28px rgba(28,43,62,.06)}
.tn-panel{padding:26px}
.tn-panel h2,.tn-heading h2,.tn-how h2{margin:.15em 0 .4em;color:#202c3d}
.tn-panel p,.tn-heading p,.tn-card-body p,.tn-step p,.tn-cta p{color:#687587;line-height:1.6}
.tn-muted{color:#788596!important}
.tn-tags{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
.tn-tags span{background:#edf4fb;border:1px solid #dce8f4;color:#396489;border-radius:999px;padding:8px 12px;font-size:.83rem;font-weight:700}
.tn-heading{margin-bottom:20px}
.tn-heading h2{font-size:2rem}
.tn-entry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tn-entry-card{overflow:hidden}
.tn-entry-images{display:grid;grid-template-columns:1fr 1fr;aspect-ratio:2/1;background:#e9eef5}
.tn-mini-image{position:relative;min-width:0;overflow:hidden}
.tn-mini-image+ .tn-mini-image{border-left:2px solid #fff}
.tn-mini-image img{width:100%;height:100%;object-fit:cover;display:block}
.tn-mini-image span{position:absolute;left:10px;bottom:10px;background:#fff;color:#1f2d3e;padding:5px 8px;border-radius:4px;font-size:.68rem;font-weight:900;letter-spacing:.08em}
.tn-card-body{padding:18px}
.tn-card-kicker{font-size:.68rem;letter-spacing:.14em;font-weight:800;color:#2e6cae}
.tn-card-body h3{margin:.35em 0;font-size:1.12rem}
.tn-card-body h3 a{color:#202c3d;text-decoration:none}
.tn-card-body p{margin:0;font-size:.9rem}
.tn-card-story{margin-top:10px!important;padding-top:10px;border-top:1px solid #e8edf3;font-size:.88rem!important;line-height:1.55;color:#5f6d7d!important}
.tn-feature{overflow:hidden}
.tn-compare{display:grid;grid-template-columns:1fr 1fr;background:#dfe6ef}
.tn-shot{position:relative;min-width:0;overflow:hidden;background:#e8edf3}
.tn-shot+.tn-shot{border-left:2px solid #fff}
.tn-shot img{width:100%;height:100%;min-height:360px;max-height:600px;object-fit:cover;display:block}
.tn-shot-label{position:absolute;left:16px;top:16px;background:rgba(255,255,255,.96);border-radius:9px;padding:9px 12px;box-shadow:0 4px 15px rgba(0,0,0,.1)}
.tn-shot-label strong{display:block;font-size:.7rem;letter-spacing:.1em;color:#2e6cae}
.tn-shot-label span{display:block;font-size:.76rem;color:#667386;margin-top:2px}
.tn-feature-caption{padding:22px 24px;display:flex;justify-content:space-between;gap:20px}
.tn-feature-caption h3{margin:.25em 0;font-size:1.4rem;color:#202c3d}
.tn-feature-caption p{color:#687587;line-height:1.65}
.tn-story{white-space:normal}
.tn-badge{align-self:flex-start;background:#f2f5f8;border:1px solid #dfe5ec;border-radius:999px;padding:7px 11px;color:#667386;font-size:.78rem;font-weight:700}
.tn-empty{padding:38px;text-align:center}
.tn-empty p{max-width:680px;margin:0 auto 20px;color:#687587;line-height:1.7}
.tn-how{padding:28px}
.tn-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.tn-step{background:#f7f9fc;border:1px solid #e2e8f0;border-radius:12px;padding:18px}
.tn-step>b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#2f6eae;color:#fff}
.tn-step h3{font-size:1rem;margin:.75em 0 .35em;color:#243144}
.tn-step p{font-size:.86rem;margin:0}
.tn-cta{border-top:1px solid #e3e8ef;margin-top:24px;padding-top:22px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.tn-cta h3{margin:0 0 4px;color:#243144}
.tn-cta p{margin:0}
.tn-form-page{padding-top:22px}
.tn-form-hero{background:transparent;border:0;padding:20px 0 12px}
.tn-form-hero h1{font-size:clamp(2rem,4vw,3rem)}
.tn-form-card{max-width:920px}
.tn-form-note{padding:14px 16px;margin-bottom:22px;border:1px solid #dbe7f3;background:#f2f7fc;border-radius:10px;color:#4c6177;line-height:1.55}
.tn-success{max-width:760px;margin:50px auto}
.tn-admin-card{margin-bottom:18px}
.tn-admin-images{display:grid;grid-template-columns:1fr 1fr;gap:2px;overflow:hidden;border-radius:12px;margin-bottom:18px}
.tn-admin-images img{width:100%;height:220px;object-fit:cover;display:block}
.tn-admin-detail .tn-shot img{min-height:300px}
.tn-admin-meta{padding-top:18px}
.tn-detail{padding-top:10px}
@media (max-width:800px){
  .tn-intro-grid,.tn-entry-grid{grid-template-columns:1fr}
  .tn-steps{grid-template-columns:1fr 1fr}
  .tn-hero{padding-top:40px}
}
@media (max-width:620px){
  .tn-shell{width:min(100% - 22px,1120px)}
  .tn-compare{grid-template-columns:1fr}
  .tn-shot+.tn-shot{border-left:0;border-top:2px solid #fff}
  .tn-shot img{min-height:250px}
  .tn-feature-caption,.tn-cta{display:block}
  .tn-cta .tn-button{margin-top:14px}
  .tn-steps{grid-template-columns:1fr}
}