/* ============================================================
   WCore website, the compact layout.
   index.html has  <body class="compact">  and this file on top
   of its own styles: the same words and pictures, less height.
   After a change here, raise the number in index.html
   (compact.css?v=4), or visitors keep the old file for days.
   ============================================================ */

body.compact{font-size:15.5px;line-height:1.5}
.compact{--maxw:1080px}
.compact .nav{height:60px}
.compact .brand img{width:36px;height:36px}

.compact section{padding:30px 0}
.compact .sec-head{margin:0 auto 22px;max-width:760px}
.compact .sec-head h2{font-size:clamp(1.35rem,3vw,1.8rem);margin-top:6px}
.compact .sec-head p{margin-top:8px;font-size:.95rem}
.compact .divider{display:none}

/* ---------- hero ---------- */
.compact .hero{padding:30px 0 34px}
.compact .hero-logo{width:min(180px,46vw);margin-bottom:10px}
.compact .hero h1{font-size:clamp(2.4rem,7vw,3.5rem)}
.compact .hero .tag{font-size:clamp(1rem,2vw,1.2rem);margin-top:6px}
.compact .hero p.sub{margin-top:12px;font-size:1rem}
.compact .hero-cta{margin-top:20px}
.compact .proof{margin-top:22px;gap:10px}
.compact .plate{min-width:112px;padding:8px 14px 10px}
.compact .plate .v{font-size:1.45rem}
.compact .proof-note{margin-top:8px;font-size:.8rem}

/* ---------- cards: the icon beside the words ---------- */
.compact .feat-grid{gap:12px}
.compact .card{padding:14px 16px 14px 62px;border-radius:10px}
.compact .card:hover{transform:translateY(-2px)}
.compact .card .ic{position:absolute;left:14px;top:14px;width:36px;height:36px;margin:0;border-radius:8px}
.compact .card .ic svg{width:19px;height:19px}
.compact .card h3{font-size:.98rem;margin-bottom:4px}
.compact .card p{font-size:.88rem;line-height:1.45}
.compact #outside{padding-bottom:10px}
.compact .outside-note{margin-top:12px;font-size:.84rem}
.compact #features{padding-top:30px}

/* ---------- the program's window ---------- */
.compact .appwin{max-width:1040px}
.compact .pgtabs{margin-bottom:14px}
.compact .pgtab{padding:7px 18px;font-size:.74rem}
.compact .pgcap{margin-top:12px;min-height:0;font-size:.9rem}
.compact .hint{display:none}

/* ---------- steps and what you need ---------- */
.compact .steps{gap:12px}
.compact .step{padding:14px 16px 14px 60px;border-radius:10px}
.compact .step::before{position:absolute;left:14px;top:14px;width:32px;height:32px;margin:0;font-size:1rem}
.compact .step h3{font-size:.98rem;margin-bottom:4px}
.compact .step p{font-size:.88rem;line-height:1.45}
.compact .needs{margin:12px auto 0;max-width:none;padding:14px 18px;border-radius:10px}
.compact .needs h3{font-size:.95rem;margin-bottom:8px}
.compact .needs li{font-size:.88rem;line-height:1.45}
.compact .needs svg{width:16px;height:16px;margin-top:3px}

/* ---------- pricing ---------- */
.compact .price-card{padding:24px 26px;border-radius:12px}
.compact .price-card h3{font-size:1.15rem;margin:2px 0 8px}
.compact .price .amt{font-size:2.8rem}
.compact .price .per{padding-bottom:6px}
.compact .price-note{margin-bottom:16px}
.compact .plist{gap:8px;margin-bottom:18px}
.compact .plist li{font-size:.9rem}
.compact .buy-how{margin-top:10px}

/* ---------- the map and the trial ---------- */
.compact .mapgal{max-width:1040px}
.compact .mapcap{padding:10px 16px 12px}
.compact .mapcap h3{font-size:.98rem}
.compact .mapcap p{font-size:.88rem}
.compact .mapthumbs{gap:8px;margin-top:10px}
.compact .subhead{font-size:1.1rem;margin:26px 0 14px}
.compact .trial-card{padding:16px 20px;border-radius:12px;margin-top:12px}
.compact .trial-card .price .amt{font-size:2.1rem}
.compact .trial-text{font-size:.88rem;margin-bottom:12px}

/* ---------- questions ---------- */
.compact .faq-list{max-width:none;gap:10px;align-items:start}
.compact .faq-item{border-radius:10px}
.compact .faq-item summary{padding:12px 16px;font-size:.93rem}
.compact .faq-item summary::after{font-size:1.1rem}
.compact .faq-item .faq-a{padding:10px 16px 14px;font-size:.89rem;line-height:1.55}

.compact footer{padding:26px 0 24px;margin-top:8px}
.compact .disclaimer{margin-top:14px;max-width:none;font-size:.75rem}

/* ---------- wide screens: side by side ---------- */
@media(min-width:860px){
  /* the words on the left, the logo on the right */
  .compact .hero{text-align:left}
  .compact .hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) 290px;column-gap:48px;align-items:center}
  .compact .hero .wrap > *{grid-column:1}
  .compact .hero .wrap > .hero-logo{grid-column:2;grid-row:1 / span 7;width:290px;margin:0}
  .compact .hero p.sub{margin-left:0;margin-right:0;max-width:600px}
  .compact .hero-cta,.compact .proof{justify-content:flex-start}

  .compact .needs ul{grid-template-columns:repeat(3,1fr);gap:8px 22px}

  /* the price: one band across */
  .compact .price-card{max-width:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:40px;align-items:center;text-align:left}
  .compact .price-card > *{grid-column:1}
  .compact .price{justify-content:flex-start}
  .compact .price-note{margin-bottom:0}
  .compact .price-card .plist{grid-column:2;grid-row:1 / span 5;margin:0;max-width:none;grid-template-columns:1fr 1fr;gap:10px 22px}
  .compact .price-card .btn{grid-column:3;grid-row:1 / span 3;align-self:end;width:auto;padding:.95em 1.7em}
  .compact .price-card .buy-how{grid-column:3;grid-row:4 / span 2;align-self:start;max-width:240px}

  .compact .faq-list{grid-template-columns:1fr 1fr}

  /* the trial: one band across, under the price */
  .compact .trial-card{max-width:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:40px;align-items:center;text-align:left}
  .compact .trial-card .price{justify-content:flex-start;margin:2px 0 0}
  .compact .trial-text{margin:0}
}

@media(max-width:859px){
  .compact section{padding:32px 0}
  /* the four numbers: two and two, not three and one */
  .compact .proof{display:grid;grid-template-columns:1fr 1fr;max-width:330px;margin-left:auto;margin-right:auto}
  .compact .plate{min-width:0}
}