/* Advance Tools – site design layer (shared by tool pages) (homepage tokens). Loaded after advanced-sizing-tool.css */
.adv-ui{--brand-indigo:#2563eb;--brand-indigo-soft:#eef3ff;--border-main:#e3e8ef;--border-subtle:#e3e8ef;--text-primary:#0f172a;--text-secondary:#526077;--text-muted:#64748b;--surface-bg:#f6f8fb;--shadow-tool:none;--ink:#0f172a;--mut:#526077;--line:#e3e8ef;--alt:#f6f8fb;--blue:#2563eb;--blue-d:#1d4ed8;--blue-t:#eef3ff;background:#fff}
body:has(.adv-ui){background:#fff}
.adv-ui *{box-sizing:border-box}
.adv-i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.adv-wrap{max-width:1200px;margin:0 auto;padding:0 1.5rem}

/* hero */
.adv-hero{background:linear-gradient(180deg,#f2f6ff 0%,#fff 100%);border-bottom:1px solid var(--line);padding:2.5rem 0 3rem}
.adv-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3rem;align-items:center}
.adv-ui .adv-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;justify-content:flex-start;margin:0 0 1.1rem;font-size:.85rem;color:var(--mut)}
.adv-ui .adv-crumbs a{color:var(--mut);text-decoration:none}
.adv-ui .adv-crumbs a:hover{color:var(--blue-d);text-decoration:underline}
.adv-ui .adv-crumbs [aria-current]{color:var(--ink);font-weight:600}
.adv-eyebrow{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .75rem;border:1px solid #d6deea;border-radius:8px;background:#fff;font-size:.8rem;font-weight:650;color:var(--blue-d)}
.adv-hero h1{margin:.9rem 0 .6rem;font-size:clamp(2rem,3.6vw,2.85rem);line-height:1.12;letter-spacing:-.03em;font-weight:750;color:var(--ink)}
.adv-hero h1 span{color:var(--blue)}
.adv-ui .adv-meta{margin:0 0 1rem;text-align:left;font-size:.88rem;color:var(--mut)}
.adv-ui .adv-meta a{color:var(--blue-d);font-weight:600;text-decoration:none}
.adv-lede{margin:0 0 1.6rem;max-width:36rem;font-size:1.08rem;line-height:1.6;color:var(--mut)}
.adv-cta{display:flex;flex-wrap:wrap;gap:.6rem}
.adv-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.8rem 1.25rem;border:1px solid #d6deea;border-radius:10px;background:#fff;font-size:.95rem;font-weight:650;color:var(--ink);text-decoration:none;transition:border-color .15s,background-color .15s}
.adv-btn:hover{border-color:var(--blue);color:var(--blue-d)}
.adv-btn-p{background:var(--blue);border-color:var(--blue);color:#fff}
.adv-btn-p:hover{background:var(--blue-d);border-color:var(--blue-d);color:#fff}
.adv-glance{background:#fff;border:1px solid #d8e0ec;border-radius:16px;padding:1.35rem}
.adv-glance-t{margin:0 0 1rem;font-size:.76rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.adv-glance ul{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.adv-glance li{display:flex;gap:.8rem;align-items:flex-start}
.adv-glance-ic{display:grid;place-items:center;flex:none;width:2.3rem;height:2.3rem;border-radius:10px;background:var(--blue-t);color:var(--blue-d);font-size:1.1rem}
.adv-glance strong{display:block;font-size:.95rem;font-weight:650;color:var(--ink)}
.adv-glance small{display:block;margin-top:.1rem;font-size:.85rem;line-height:1.45;color:var(--mut)}
.adv-demo{display:flex;align-items:center;gap:.9rem;margin-top:1.15rem;padding:.85rem 1rem;border-radius:12px;background:var(--alt)}
.adv-demo-body{position:relative;display:flex;gap:6px;padding:8px 14px;border-radius:10px;background:#dbe8f7}
.adv-demo-body::before,.adv-demo-body::after{content:"";position:absolute;top:50%;width:14px;height:2px;background:#94a3b8}
.adv-demo-body::before{right:100%}.adv-demo-body::after{left:100%}
.adv-demo-body i{display:block;width:7px;height:26px;border-radius:2px}
.adv-demo p{margin:0 0 0 .5rem;font-size:.86rem;line-height:1.45;color:var(--mut)}
.adv-demo p b{color:var(--ink)}

/* calculator area */
.adv-ui .saas-layout{margin:2.25rem auto 2.5rem!important;padding:0 1.5rem;gap:1.5rem!important}
.adv-ui .saas-card{border:1px solid var(--line)!important;border-radius:16px!important;box-shadow:none!important;background:#fff}
.adv-ui .saas-card-header{background:#fff!important;border-bottom:1px solid #eef1f5!important;padding:1rem 1.35rem!important}
.adv-ui .saas-card-title{font-size:1rem!important;font-weight:680!important;color:var(--ink)!important;gap:.55rem!important}
.adv-ui .saas-card-title svg{color:var(--blue)}
.adv-ui .saas-card-body{padding:1.35rem!important}
.adv-ui .section-label{font-size:.76rem!important;font-weight:650!important;letter-spacing:.05em;color:var(--mut)!important}
.adv-ui .calc-input,.adv-ui .calc-select{border:1.5px solid #cdd6e3!important;border-radius:10px!important;box-shadow:none!important;min-height:2.85rem}
.adv-ui .calc-input:focus,.adv-ui .calc-select:focus{border-color:var(--blue)!important;outline:2px solid rgba(37,99,235,.25)}
.adv-ui .type-card{border:1.5px solid var(--line);border-radius:12px;height:112px}
.adv-ui .type-card:hover{border-color:#b9cbf7;background:#fbfcff}
.adv-ui .type-card:has(input:checked){border-color:var(--blue);background:var(--blue-t);box-shadow:none}
.adv-ui .type-card input{accent-color:var(--blue)}
.adv-ui .capacitor-graphic{margin:2rem auto;padding:1.25rem 1.5rem;max-width:100%;border-radius:14px;background:var(--alt)}
.adv-ui .capacitor-graphic svg{max-width:340px;filter:drop-shadow(0 6px 10px rgba(15,23,42,.12))}
.adv-ui .band-select{border-width:1.5px!important}
.adv-ui .btn-primary-action{background:var(--blue)!important;border-radius:10px!important;box-shadow:none!important}
.adv-ui .btn-primary-action:hover{background:var(--blue-d)!important}
.adv-ui button[onclick*="resetCapacitor"]{border-radius:10px!important}
.adv-ui .main-result-box{background:var(--blue)!important;border-radius:14px!important;box-shadow:none!important}
.adv-ui .result-stat{border-bottom:1px solid #eef1f5}
.adv-ui .stat-label{color:var(--mut)!important}
.adv-ui .main-result-box .section-label{color:rgba(255,255,255,.85)!important}

/* content sections */
.adv-ui .content-section{max-width:none!important;margin:0!important;padding:3.5rem 0 0!important;border-top:0!important}
.adv-ui .content-section:last-of-type{padding-bottom:1rem!important}
.adv-ui .content-block{max-width:1200px!important;margin:0 auto!important;padding:0 1.5rem!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.adv-ui .content-section>.content-block,.adv-ui .content-section .saas-card{box-shadow:none!important}
.adv-ui .content-section h2{font-size:clamp(1.45rem,2.2vw,1.8rem)!important;font-weight:720!important;letter-spacing:-.025em;line-height:1.2;color:var(--ink)!important}
.adv-ui .content-section h3{color:var(--ink)!important}
.adv-ui .content-section p{color:var(--mut)}
.adv-ui .content-section .saas-card{border-radius:14px!important}
.adv-ui .content-section [style*="box-shadow"]{box-shadow:none!important}
.adv-ui code,.adv-ui pre,.adv-ui .formula-box{color:var(--blue-d)!important}
.adv-ui table{border-collapse:collapse}
.adv-ui table th{background:var(--alt)!important;color:var(--ink)!important;font-weight:650}
.adv-ui table th:first-child{color:var(--ink)!important}
.adv-ui table td,.adv-ui table th{border-bottom:1px solid var(--line)!important}
.adv-ui details{border:1px solid var(--line)!important;border-radius:12px!important;box-shadow:none!important;background:#fff}
.adv-ui summary{font-weight:600}

@media (max-width:960px){.adv-hero-grid{grid-template-columns:minmax(0,1fr);gap:2rem}.adv-ui .saas-sidebar{top:auto}}
@media (max-width:640px){
  .adv-wrap,.adv-ui .saas-layout,.adv-ui .content-block{padding-left:1rem!important;padding-right:1rem!important}
  .adv-hero{padding:1.75rem 0 2.25rem}
  .adv-lede{font-size:1rem}
  .adv-btn{flex:1;justify-content:center}
  .adv-ui .saas-card-body{padding:1.1rem!important}
  .adv-ui .type-card{height:96px}
}
.adv-ui .saas-sidebar{top:88px!important}
@media (max-width:1024px){.adv-ui .saas-sidebar{position:static!important}}

/* full-width wrapper (some tool pages lack the inline override) */
.page-wrapper.adv-ui{width:100%!important;max-width:100%!important;padding:0!important;margin:0!important}
.adv-ui .saas-layout{max-width:1200px!important}
/* floating action bar */
.adv-ui #global-actions-bottom{border:1px solid var(--line)!important;border-radius:14px!important;box-shadow:0 10px 30px -12px rgba(15,23,42,.25)!important;background:rgba(255,255,255,.96)!important}
.adv-ui #global-actions-bottom button{border-radius:10px!important;box-shadow:none!important}
.adv-ui #global-actions-bottom .btn-primary-action{background:var(--blue)!important;color:#fff!important;border:1px solid var(--blue)!important}
.adv-ui #global-actions-bottom .btn-primary-action:hover{background:var(--blue-d)!important;border-color:var(--blue-d)!important}
.adv-ui #global-actions-bottom #btn-next-stage{background:#fff!important;color:var(--blue-d)!important;border:1.5px solid var(--blue)!important}
.adv-ui #global-actions-bottom #btn-next-stage:hover{background:var(--blue-t)!important;color:var(--blue-d)!important}
.adv-ui #global-actions-bottom #btn-next-stage svg{color:var(--blue-d)}
.adv-ui #global-actions-bottom #btn-generate-pdf{background:#0f172a!important;border-color:#0f172a!important;color:#fff!important}
.adv-ui #global-actions-bottom #btn-generate-pdf:hover{background:#1e293b!important}
.adv-ui [style*="rgba(79, 70, 229"]{box-shadow:none!important}
/* section boxes inside tool content */
.adv-ui .content-section .saas-card,.adv-ui section .saas-card{box-shadow:none!important}
.adv-ui [style*="linear-gradient(135deg, var(--brand-indigo)"]{background:var(--blue)!important}
.adv-ui .stage-section,.adv-ui .saas-section{box-shadow:none!important}

/* stage result cards: light headers instead of dark/indigo bars */
.adv-ui section.saas-card{border-radius:16px!important;overflow:hidden}
.adv-ui section.saas-card>.saas-card-header{background:var(--blue-t)!important;color:var(--ink)!important;border-bottom:1px solid #dbe5fb!important}
.adv-ui section.saas-card>.saas-card-header :is(div,span,h2,h3,p,strong){color:var(--ink)!important}
.adv-ui section.saas-card>.saas-card-header svg{color:var(--blue)!important;stroke:currentColor}
.adv-ui section.saas-card{width:calc(100% - 3rem)!important;max-width:1152px!important;margin-left:auto!important;margin-right:auto!important}
.adv-ui .saas-card-header .saas-badge{background:#fff!important;color:var(--blue-d)!important;border:1px solid #c9d8f7;padding:.22rem .65rem;border-radius:999px;font-size:.74rem;font-weight:650}
.adv-ui #global-actions-bottom{margin:2rem auto 1rem!important}
.adv-ui section.saas-card[id^="stage-"]{margin-bottom:2rem!important}
@media (max-width:640px){.adv-ui section.saas-card{width:calc(100% - 2rem)!important}}

/* ===== content polish (worked example, design rules, 4-card grids, links, FAQ) ===== */
.adv-ui .content-section p a:not([class]),.adv-ui .content-section li a:not([class]){color:var(--blue-d);font-weight:600;text-decoration:underline;text-decoration-color:#bcd0f7;text-underline-offset:3px}
.adv-ui .content-section p a:not([class]):hover,.adv-ui .content-section li a:not([class]):hover{text-decoration-color:currentColor}
/* 4 cards in an auto-fit grid: one even row instead of 3 + 1 */
.adv-ui .content-section div[style*="grid-template-columns: repeat(auto-fit"]:has(>.saas-card:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:1rem!important}
.adv-ui .content-section div[style*="grid-template-columns: repeat(auto-fit"]:has(>.saas-card:nth-child(4):last-child)>.saas-card{padding:1.25rem!important}
/* worked example: numbered step cards */
.adv-ui #worked-example ol{list-style:none;counter-reset:wx;margin:1.25rem 0!important;padding:0!important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.adv-ui #worked-example ol>li{counter-increment:wx;position:relative;margin:0;padding:1rem 1.1rem 1rem 3.4rem;border:1px solid var(--line);border-radius:14px;background:#fff;line-height:1.6!important;font-size:.95rem;color:var(--mut)}
.adv-ui #worked-example ol>li::before{content:counter(wx);position:absolute;left:1rem;top:1rem;display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--blue-t);color:var(--blue-d);font-size:.85rem;font-weight:700}
.adv-ui #worked-example ol>li>strong:first-child{display:block;margin-bottom:.15rem;color:var(--ink)}
.adv-ui #worked-example .content-block>p:last-child{margin:0;padding:.9rem 1.1rem;border-left:3px solid #f59e0b;border-radius:0 10px 10px 0;background:#fffbeb;color:#78350f!important;font-size:.93rem}
/* design rules: check-mark cards */
.adv-ui #design-rules ul{list-style:none!important;margin:1.25rem 0!important;padding:0!important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.adv-ui #design-rules ul>li{position:relative;margin:0;padding:1rem 1.1rem 1rem 3.2rem;border:1px solid var(--line);border-radius:14px;background:#fff;line-height:1.6!important;font-size:.93rem;color:var(--mut)}
.adv-ui #design-rules ul>li::before{content:"";position:absolute;left:1rem;top:1.05rem;width:1.6rem;height:1.6rem;border-radius:8px;background:#e6f6ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat}
.adv-ui #design-rules ul>li::marker{content:none}
.adv-ui #design-rules ul>li>strong:first-child{display:block;margin-bottom:.15rem;color:var(--ink)}
.adv-ui #design-rules .content-block>p:last-child{margin:0;padding:.9rem 1.1rem;border-radius:12px;background:var(--alt);font-size:.93rem}
/* FAQ: every item keeps its full outline */
.adv-ui .faq-item:last-child{border-bottom:1px solid var(--line)!important}
@media (max-width:1080px){.adv-ui .content-section div[style*="grid-template-columns: repeat(auto-fit"]:has(>.saas-card:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:640px){
  .adv-ui .content-section div[style*="grid-template-columns: repeat(auto-fit"]:has(>.saas-card:nth-child(4):last-child){grid-template-columns:minmax(0,1fr)!important}
  .adv-ui #worked-example ol,.adv-ui #design-rules ul{grid-template-columns:minmax(0,1fr)}
}
.adv-ui .content-section[style*="background"]{margin-top:3.5rem!important;padding:3rem 0!important}
.adv-ui .content-section[style*="background"]+.content-section{padding-top:3rem!important}