/* ============================================================================
   MAGNETIQ V2 . assets/css/why.css
   ----------------------------------------------------------------------------
   why.html: the "Kenapa kami" page. Reuses the process page hero (.pc-hero,
   .pc-facts) from inner.css and the shared tokens from core.css. Everything
   below is page specific and prefixed .wy-.
   ========================================================================== */

/* ---- hero ---------------------------------------------------------------- */
.wy-h1{ max-width:13ch; }

/* ---- what visitors feel -------------------------------------------------- */
.wy-feel-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3vw,44px);
  margin-top:clamp(40px,6vh,72px);
}
.wy-feel-card{ border-top:1px solid var(--line); padding-top:22px; }
.wy-feel-card .wy-n{ display:block; color:var(--volt-2); margin-bottom:16px; }
.wy-feel-card h3{ font-size:clamp(1.5rem,2.3vw,2.2rem); margin:0 0 12px; letter-spacing:-.02em; }
.wy-feel-card p{ color:var(--fg-dim); font-size:15px; line-height:1.55; max-width:40ch; margin:0; }

/* ---- comparison table ---------------------------------------------------- */
.wy-cmp-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin-top:clamp(32px,5vh,60px);
  border-top:1px solid var(--line);
}
.wy-cmp{ border-collapse:collapse; width:100%; min-width:880px; font-size:15px; }
.wy-cmp th{
  text-align:left; padding:16px 18px; vertical-align:bottom;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--fg-dim); border-bottom:1px solid var(--line);
}
.wy-cmp th.is-us{ color:var(--acid); }
.wy-cmp td{
  padding:18px; vertical-align:top; line-height:1.5;
  color:var(--fg-dim); border-bottom:1px solid var(--line);
}
.wy-cmp td:first-child{ color:var(--fg); font-weight:600; white-space:nowrap; width:1%; padding-right:32px; }
.wy-cmp td.is-us{ color:var(--fg); }
.wy-cmp th.is-us, .wy-cmp td.is-us{ background:var(--faint); }
.wy-cmp tbody tr:last-child td{ border-bottom:0; }

/* ---- three packages ------------------------------------------------------ */
.wy-pk-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  margin-top:clamp(40px,6vh,72px);
}
.wy-pk{
  position:relative;
  display:flex; flex-direction:column; gap:22px;
  padding:clamp(24px,2.4vw,36px);
  border:1px solid var(--line); background:var(--card);
}
.wy-pk.is-hot{ border-color:var(--volt); box-shadow:inset 0 0 0 1px var(--volt); }
.wy-pk-tag{ position:absolute; top:-9px; left:clamp(24px,2.4vw,36px); padding:2px 10px; background:var(--volt); color:#FFFFFF; }
.wy-pk-head{ display:flex; flex-direction:column; gap:6px; }
.wy-pk-name{ font-size:clamp(1.7rem,2.4vw,2.3rem); margin:0; letter-spacing:-.02em; }
.wy-pk dl{ display:grid; gap:16px; margin:0; }
.wy-pk dt{ margin:0 0 6px; }
.wy-pk dd{ margin:0; font-size:15px; line-height:1.5; }
.wy-pk .btn{ margin-top:auto; align-self:flex-start; }

/* ---- PREMIUM taken apart ------------------------------------------------- */
.wy-pr-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px clamp(24px,3vw,44px);
  margin-top:clamp(40px,6vh,72px);
}
.wy-pr-item{ border-top:1px solid var(--line); padding-top:18px; }
.wy-pr-item h3{ font-size:clamp(1.1rem,1.4vw,1.35rem); margin:0 0 8px; letter-spacing:-.01em; line-height:1.2; }
.wy-pr-item p{ font-size:15px; line-height:1.55; color:var(--fg-dim); margin:0; }
.wy-pr-when{
  display:grid; grid-template-columns:1fr 1fr; gap:32px;
  margin-top:clamp(44px,7vh,80px); padding-top:32px; border-top:1px solid var(--line);
}
.wy-pr-when h4{ font-size:clamp(1.15rem,1.5vw,1.45rem); margin:0 0 14px; }
.wy-pr-when ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.wy-pr-when li{ position:relative; padding-left:20px; font-size:15px; line-height:1.5; color:var(--fg-dim); max-width:46ch; }
.wy-pr-when li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--volt-2); }

/* ---- what we do not promise --------------------------------------------- */
.wy-no-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:22px clamp(28px,4vw,56px);
  margin-top:clamp(32px,5vh,60px);
}
.wy-no-item{ display:flex; gap:16px; margin:0; font-size:16px; line-height:1.55; max-width:52ch; }
.wy-no-item i{
  flex:none; width:28px; height:28px; margin-top:2px;
  display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--fg); font-style:normal; font-size:12px; font-weight:600;
}

/* the one thing we DO promise, closing the list above. 2026-09-08 */
.wy-no-guar{
  margin-top:clamp(28px,4.5vh,52px);
  padding-top:clamp(14px,2vh,20px);
  border-top:1px solid var(--line);
  font-size:16px; line-height:1.55; max-width:56ch; color:var(--fg);
}

/* ---- cta ------------------------------------------------------------------ */
.wy-cta-sec .sec-head .lede{ max-width:56ch; }
.wy-cta-sec .cluster{ margin-top:clamp(24px,4vh,40px); }

/* ---- responsive ----------------------------------------------------------- */
@media (max-width:1100px){
  .wy-pk-grid{ grid-template-columns:1fr; }
  .wy-pr-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:820px){
  .wy-feel-grid, .wy-pr-grid, .wy-pr-when, .wy-no-grid{ grid-template-columns:1fr; }
  .wy-cmp{ min-width:760px; font-size:14px; }
  .wy-cmp td, .wy-cmp th{ padding:14px; }
  .wy-cmp td:first-child{ white-space:normal; width:auto; min-width:120px; }
}

/* ---- comparison: keep the row labels on screen while scrolling sideways,
        and name the two halves of the table (us / everyone else) ---------- */
.wy-cmp td:first-child, .wy-cmp th:first-child{
  position:sticky; left:0; z-index:2; background:var(--bg);
  border-right:1px solid var(--line);
}
.wy-cmp-groups th{
  padding:12px 18px 8px; border-bottom:0; vertical-align:bottom;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
}
.wy-cmp-groups th.is-us{ color:var(--acid); background:var(--faint); }
.wy-cmp-groups th.is-them{
  color:var(--fg); text-align:left;
  border-bottom:1px solid var(--fg);
}
.wy-cmp-groups th.is-us{ border-bottom:1px solid var(--acid); }
.wy-cmp thead tr:nth-child(2) th{ padding-top:14px; }
.wy-cmp-hint{ display:none; margin:12px 0 0; }
@media (max-width:820px){
  .wy-cmp-hint{ display:block; }
  .wy-cmp td:first-child{ max-width:130px; }
}
/* the "everyone else" label slides along inside its three columns while the
   table is scrolled sideways, so it stays readable at any scroll position */
.wy-cmp-groups th.is-them span{ display:inline-block; position:sticky; left:150px; }
@media (max-width:820px){ .wy-cmp-groups th.is-them span{ left:148px; } }