/* AST Catalog — Comparison
 *
 * Built on the same design system as /about-us and /brand: identical tokens,
 * Bricolage Grotesque and Public Sans, .ast-wrap at 1160px, 88px section
 * rhythm, the .ast-page-hero panel, the card treatment with the gold top bar
 * on hover, and the same theme-override guard.
 *
 * A customer arriving from the brand hub should not be able to tell they have
 * changed page furniture. The comparison is a different job, not a different
 * company.
 */

.ast-cmp-page{
  --ink:#0A1F33; --ink-soft:#3C536B; --sky:#EDF4F9;
  --sun:#FFB703; --sun-deep:#F48C06; --line:#D8E2EB; --radius:16px;
  --display:'Bricolage Grotesque',sans-serif; --body:'Public Sans',sans-serif;
}
.ast-cmp-page *{margin:0;padding:0;box-sizing:border-box}
.ast-cmp-page{font-family:var(--body);color:var(--ink);line-height:1.65;font-size:17px;overflow-x:hidden}
.ast-cmp-page img{max-width:100%}
.ast-cmp-page a{color:inherit}
.ast-cmp-page .ast-wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.ast-cmp-page h1,.ast-cmp-page h2,.ast-cmp-page h3{font-family:var(--display);line-height:1.15}
.ast-cmp-page .ast-eyebrow{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--sun-deep);margin-bottom:12px}
.ast-cmp-page .ast-section{padding:88px 0}
.ast-cmp-page .ast-btn{display:inline-block;font-weight:700;font-size:1rem;padding:14px 28px;border-radius:999px;text-decoration:none;border:none;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.ast-cmp-page .ast-btn:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.ast-cmp-page .ast-btn-sun{background:linear-gradient(135deg,var(--sun) 0%,var(--sun-deep) 100%);color:var(--ink);box-shadow:0 6px 20px rgba(244,140,6,.35)}
.ast-cmp-page .ast-btn-sun:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(244,140,6,.5)}

/* Hero — the same panel as the brand hub. */
.ast-cmp-page .ast-page-hero{position:relative;color:#fff;background-image:url('https://advancedsolartec.com.au/wp-content/uploads/2022/11/9.png');background-size:cover;background-position:center}
.ast-cmp-page .ast-page-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 75% 70% at 50% 50%,rgba(10,31,51,.85) 0%,rgba(10,31,51,.7) 60%,rgba(10,31,51,.6) 100%)}
.ast-cmp-page .ast-page-hero-inner{position:relative;z-index:2;text-align:center;padding:88px 24px;max-width:820px;margin:0 auto}
.ast-cmp-page .ast-page-hero .panel{background:rgba(8,24,40,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:44px 38px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.ast-cmp-page .ast-page-hero h1{font-size:clamp(2rem,4.4vw,3.1rem);font-weight:800;margin-bottom:14px;text-shadow:0 2px 4px rgba(0,0,0,.9),0 4px 24px rgba(0,0,0,.7)}
.ast-cmp-page .ast-page-hero h1 span{color:#FFC93C}
.ast-cmp-page .ast-page-hero p{font-size:1.15rem;font-weight:600;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.9)}

/* Cards — the brand hub's tile treatment, gold bar and all. */
.ast-cmp-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 32px rgba(10,31,51,.07);padding:32px 34px;margin:0 0 26px;overflow:hidden}
.ast-cmp-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--sun),var(--sun-deep))}
.ast-cmp-card h2{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700;margin-bottom:8px}
.ast-cmp-card h3{font-size:1.1rem;font-weight:700;margin:26px 0 10px}
.ast-cmp-lead{color:var(--ink-soft);margin-bottom:20px;max-width:64ch}

/* The first question, as the brand hub's chips. */
.ast-cmp-opts{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.ast-cmp-opt{position:relative;display:block;width:100%;text-align:left;cursor:pointer;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 32px rgba(10,31,51,.07);padding:24px 22px;font:inherit;color:var(--ink);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.ast-cmp-opt::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--sun),var(--sun-deep));transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.ast-cmp-opt:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(10,31,51,.12)}
.ast-cmp-opt:hover::before{transform:scaleX(1)}
.ast-cmp-opt:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.ast-cmp-opt strong{display:block;font-family:var(--display);font-size:1.12rem;font-weight:700}
.ast-cmp-opt span{display:block;margin-top:4px;color:var(--ink-soft);font-size:.92rem;line-height:1.5}

.ast-cmp-brands{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px}
.ast-cmp-brand{position:relative;cursor:pointer;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px;font:inherit;color:inherit;text-align:left;box-shadow:0 6px 18px rgba(10,31,51,.05);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.ast-cmp-brand small{display:block;color:var(--ink-soft);font-size:.8rem;margin-top:2px}
.ast-cmp-brand:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(10,31,51,.1);border-color:var(--sun-deep)}
.ast-cmp-brand:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.ast-cmp-brand.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}
.ast-cmp-brand.on small{color:rgba(255,255,255,.75)}

.ast-cmp-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:24px}
.ast-cmp-go{display:inline-block;cursor:pointer;border:none;text-decoration:none;background:linear-gradient(135deg,var(--sun) 0%,var(--sun-deep) 100%);color:var(--ink);border-radius:999px;padding:14px 28px;font:inherit;font-weight:700;box-shadow:0 6px 20px rgba(244,140,6,.35);transition:transform .18s ease,box-shadow .18s ease}
.ast-cmp-go:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(244,140,6,.5)}
.ast-cmp-go[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.ast-cmp-back{cursor:pointer;background:#fff;border:1px solid var(--line);border-radius:999px;padding:14px 24px;font:inherit;font-weight:600;color:var(--ink-soft)}
.ast-cmp-back:hover{border-color:var(--sun-deep);color:var(--ink)}

.ast-cmp-note{background:var(--sky);border-left:4px solid var(--sun);border-radius:0 var(--radius) var(--radius) 0;padding:16px 20px;margin:18px 0;color:var(--ink-soft)}
.ast-cmp-note strong{color:var(--ink)}

/* The priorities. The number is the weight, so it is drawn as one. */
.ast-cmp-order{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.ast-cmp-order li{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--sun);border-radius:12px;padding:14px 16px;box-shadow:0 6px 18px rgba(10,31,51,.05)}
.ast-cmp-order li.ast-cmp-empty{border-left-color:var(--line);background:var(--sky);color:var(--ink-soft);box-shadow:none}
.ast-cmp-order .n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--display);font-weight:800;font-size:.9rem;flex:0 0 auto}
.ast-cmp-x{margin-left:auto;cursor:pointer;background:transparent;border:0;font-size:1.4rem;line-height:1;color:var(--ink-soft);padding:0 6px}
.ast-cmp-x:hover{color:var(--ink)}

/* The result. A bar is seen; a number in a row of numbers has to be read. */
.ast-cmp-rank{position:relative;display:flex;gap:18px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:0 0 14px;background:#fff;box-shadow:0 12px 32px rgba(10,31,51,.07);overflow:hidden}
.ast-cmp-rank.first{border-color:var(--sun);box-shadow:0 22px 48px rgba(10,31,51,.12)}
.ast-cmp-rank.first::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--sun),var(--sun-deep))}
.ast-cmp-pos{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:1.05rem}
.ast-cmp-rank.first .ast-cmp-pos{background:linear-gradient(135deg,var(--sun),var(--sun-deep));color:var(--ink)}
.ast-cmp-body{flex:1 1 auto;min-width:0}
.ast-cmp-body strong{font-family:var(--display);font-size:1.1rem}
.ast-cmp-body small{color:var(--ink-soft)}
.ast-cmp-bars{margin-top:12px;display:grid;gap:7px}
.ast-cmp-bar{display:grid;grid-template-columns:minmax(150px,1.1fr) 2fr auto;gap:14px;align-items:center;font-size:.88rem;color:var(--ink-soft)}
.ast-cmp-bar i{display:block;height:10px;border-radius:5px;background:linear-gradient(90deg,var(--sun),var(--sun-deep));min-width:4px}
.ast-cmp-bar em{font-style:normal;color:var(--ink);font-weight:700;white-space:nowrap}
.ast-cmp-bar.unknown{opacity:.65}
.ast-cmp-bar.unknown em{color:var(--ink-soft);font-weight:400}

.ast-cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius)}
.ast-cmp-scroll table{width:100%;border-collapse:collapse;font-size:.92rem}
.ast-cmp-scroll th,.ast-cmp-scroll td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.ast-cmp-scroll tr:last-child td{border-bottom:0}
.ast-cmp-scroll thead th{background:var(--sky);font-family:var(--display);color:var(--ink)}
.ast-cmp-scroll td:first-child{color:var(--ink-soft)}

/* Closing block — the brand hub's CTA. */
.ast-cmp-page .ast-cta{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(10,31,51,.42) 0%,rgba(20,71,107,.32) 100%),url('https://advancedsolartec.com.au/wp-content/uploads/2022/11/14.png');background-size:cover;background-position:center;color:#fff;text-align:center}
.ast-cmp-page .ast-cta h2{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:800;margin-bottom:14px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.8),0 5px 24px rgba(0,0,0,.55)}
.ast-cmp-page .ast-cta p{color:#fff;font-weight:600;font-size:1.12rem;margin-bottom:30px;max-width:56ch;margin-left:auto;margin-right:auto;text-shadow:0 2px 5px rgba(0,0,0,.8)}
.ast-cmp-page .ast-cta .ast-btn{box-shadow:0 8px 28px rgba(244,140,6,.6);font-size:1.08rem;padding:16px 34px}

@media (max-width:900px){.ast-cmp-page .ast-section{padding:60px 0}.ast-cmp-card{padding:24px 20px}}
@media (max-width:640px){
  .ast-cmp-bar{grid-template-columns:1fr;gap:3px}
  .ast-cmp-bar i{width:100%!important;max-width:100%}
  .ast-cmp-rank{padding:16px;gap:12px}
}
@media (prefers-reduced-motion:reduce){
  .ast-cmp-page .ast-btn,.ast-cmp-opt,.ast-cmp-brand,.ast-cmp-go{transition:none}
  .ast-cmp-opt:hover,.ast-cmp-brand:hover,.ast-cmp-go:hover{transform:none}
}

/* Theme-override guard — the same one the brand hub carries, because the theme
   reaches into headings and into colours on dark backgrounds. */
.ast-cmp-page .ast-page-hero h1{color:#FFFFFF !important}
.ast-cmp-page .ast-page-hero h1 span{color:#FFC93C !important}
.ast-cmp-page .ast-page-hero p{color:#FFFFFF !important}
.ast-cmp-page .ast-page-hero .ast-eyebrow{color:#FFC93C !important}
.ast-cmp-page .ast-cta h2,.ast-cmp-page .ast-cta p{color:#FFFFFF !important}
.ast-cmp-page .ast-cmp-brand.on,.ast-cmp-page .ast-cmp-brand.on small{color:#FFFFFF !important}
.ast-cmp-page h1,.ast-cmp-page h2,.ast-cmp-page h3{font-family:'Bricolage Grotesque',Arial,Helvetica,sans-serif !important}
.ast-cmp-page,.ast-cmp-page p,.ast-cmp-page a,.ast-cmp-page span,.ast-cmp-page button{font-family:'Public Sans',Arial,Helvetica,sans-serif !important}