/* ============================================================
   Home - page-only styles.
   Figma: "Home — High Fidelity v1 (Desktop 1440)" (6056:410).
   Shared tokens/components live in assets/css/ezee.css.
   ============================================================ */

/* ---------- 00 Announcement bar (6056:411) ---------- */
.announce{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-3);
  min-height:44px;padding:var(--space-3) var(--gutter);
  background:var(--surface-inverse);text-align:center;
}
.announce__text{font-size:14px;line-height:20px;font-weight:500;color:var(--text-on-brand)}

/* ---------- 02 Hero (6160:2322) ---------- */
.hero{position:relative;height:700px;overflow:hidden;background:var(--surface)}
.hero__inner{position:relative;height:100%}
.hero__copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5);width:583px;padding-top:139px}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.hero__actions .btn--primary{padding-inline:var(--space-7)}
.hero__actions .btn--ghost{padding-inline:var(--space-5)}
/* Composite art (6498:6171) exported with its overflow: sits 101px from the
   hero top and 35.5px past the right edge of the 1200 grid. */
.hero__art{position:absolute;top:101px;right:-35.5px;width:min(589.5px,calc(100% - 583px + 35.5px - var(--space-5)))}
.hero__art img{width:100%;height:auto}

/* ---------- 03 Platform strip (6056:414) ---------- */
.platforms{padding-block:var(--space-6);background:var(--surface-subtle)}
.platforms__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5)}
.platforms__label,.platforms__item{font-size:14px;line-height:20px;font-weight:500;color:var(--text-secondary)}
.platforms__list{display:flex;align-items:center;gap:var(--space-7)}
.platforms__item{display:flex;align-items:center;gap:var(--space-2)}
.platforms__icon{display:flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px}

/* Icons render at the SVG's own width/height; the wrapper boxes are the Figma icon frames. */
.platforms__icon img,.tool-row__tile img,.why-card__tile img,.chip__icon img,.plan__check img{width:auto;height:auto}

/* ---------- Section heads used by Why ezee + Pricing (Web/Section Head 6097:1263, gap 12) ---------- */
.home-head{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center}

/* ---------- 04 One account, three tools (6488:6109, component set 6227:31789) ---------- */
.tools{padding-block:var(--section-y);background:var(--surface)}
/* The panel is 1280 wide in Figma (section padding 80, not 120) so that its
   40px inner padding lines the content up with the 1200 grid. */
.tools__panel{
  display:flex;align-items:center;gap:var(--space-8);
  width:min(1280px,100% - 2 * var(--gutter));margin-inline:auto;padding:40px;
  background:var(--primary-50);border-radius:var(--radius-md);
}
.tools__copy{display:flex;flex-direction:column;gap:var(--space-4);flex:none;width:440px}
.tools__head{display:flex;flex-direction:column;gap:var(--space-3)}
.tools__rows{display:flex;flex-direction:column;gap:var(--space-4)}

/* Web/Product Row - unselected rows have a hairline top rule and 12px padding;
   the selected row is a white 12px-radius card with 16px padding. */
.tool-row{
  position:relative;display:flex;align-items:flex-start;gap:var(--space-4);
  padding:var(--space-3);border-top:1px solid var(--gray-50);border-radius:0;
  transition:background-color .3s ease-out;
}
.tool-row--vpn{padding:var(--space-4);border-top:0;border-radius:var(--radius-md)}
.tool-row--cloud{min-height:133px}
.tool-row[data-selected="true"]{padding:var(--space-4);background:var(--white);border-radius:var(--radius-md)}
.tools[data-state="vault"] .tool-row--cloud{padding-block:var(--space-4)}
.tool-row__tile{
  display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;
  border-radius:var(--radius-sm);background:var(--primary-100);transition:background-color .3s ease-out;
}
.tool-row[data-selected="true"] .tool-row__tile{background:var(--brand-subtle)}
.tool-row__text{display:flex;flex-direction:column;gap:var(--space-2);flex:1;min-width:0}
.tool-row--vpn .tool-row__text,.tool-row--vault[data-selected="true"] .tool-row__text{gap:var(--space-1)}
.tool-row__name{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.tool-row--cloud .tool-row__name{gap:var(--space-3)}
.tool-row__btn{font:inherit;letter-spacing:inherit;color:inherit;text-align:left}
.tool-row__btn::after{content:"";position:absolute;inset:0;border-radius:var(--radius-md)}
.tool-row__btn:focus-visible{outline:none}
.tool-row__btn:focus-visible::after{outline:2px solid var(--brand);outline-offset:2px}
.tool-row[data-selected="true"] .tool-row__btn{cursor:default}
.tool-row__desc{font-size:14px;line-height:20px;font-weight:500;color:var(--text-secondary)}
.tool-row__link{display:flex;padding-top:var(--space-1)}
.tool-row__link .link-arrow{position:relative;z-index:1}
/* Web/Badge "Coming soon" */
.badge{
  display:inline-flex;align-items:center;justify-content:center;padding:var(--space-1) var(--space-3);
  background:var(--surface-subtle);border:1px solid var(--border);border-radius:var(--radius-pill);
  font-size:12px;line-height:16px;color:var(--text-muted);white-space:nowrap;
}
.tool-row--cloud[data-selected="true"] .badge{border-color:var(--border-strong);color:var(--text-secondary)}

/* Product shots - one per variant, cross-faded like the prototype's
   300ms ease-out Smart Animate. */
.tools__shots{display:grid;flex:1 1 696px;min-width:0;max-width:696px}
.tools__shot{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .3s ease-out,visibility 0s linear .3s}
.tools__shot[data-active="true"]{opacity:1;visibility:visible;transition:opacity .3s ease-out}
.tools__shot > img{width:100%;height:auto}
/* Cloud storage variant (6235:49816): white card, glow, "COMING SOON!" art and live text */
.tools__cloud{
  position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;
  aspect-ratio:696/590;padding:117px var(--space-5) 0;gap:109px; /* art top 117, art-to-text 109 (from Figma positions) */
  background:var(--white);border-radius:var(--radius-lg);text-align:center;
}
.tools__cloud-glow{position:absolute;top:-190px;right:-210px;width:440px;max-width:none;height:auto;pointer-events:none}
.tools__cloud-art{position:relative;width:367.688px;max-width:100%;height:auto}
.tools__cloud-text{position:relative;display:flex;flex-direction:column;gap:20px;max-width:508px} /* Figma raw gap 20 */
.tools__cloud-text h3{color:var(--gray-900)}
.tools__cloud-text p{font-size:18px;line-height:28px;color:var(--gray-600)}

/* ---------- 05 Why ezee (6056:416) ---------- */
.why__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5);margin-top:var(--space-6);overflow:hidden}
.why-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);
  min-height:176px;padding:20px;background:var(--white);border-radius:var(--radius-md); /* Figma raw inset 20 */
}
.why-card--tall{min-height:192px}
/* 6431:5185 does not clip its decorative grid in Figma, so it bleeds over its neighbours. */
.why-card--bleed{overflow:visible}
.why-card__tile{display:flex;align-items:center;justify-content:center;flex:none;width:56px;height:56px;border-radius:var(--radius-lg);background:var(--primary-50)}
.why-card__text{display:flex;flex-direction:column;gap:var(--space-4);max-width:544px}
.why-card__text p{font-size:14px;line-height:20px;color:var(--text-secondary)}
.why-card__grid{position:absolute;top:-64px;right:-62px;width:233.27px;max-width:none;height:auto;pointer-events:none}

/* ---------- 06 Password Vault (6056:417) ---------- */
.vault__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}
.vault__head-copy{display:flex;flex-direction:column;gap:var(--space-3);width:460px;max-width:100%}
.vault__actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.vault__bento{display:flex;flex-direction:column;gap:var(--space-5);margin-top:var(--space-7)}
.vault__row{display:flex;align-items:stretch;gap:var(--space-5)}
.vault__col{display:flex;flex-direction:column;gap:var(--space-5);flex:1;min-width:0}
.bento-card{
  display:flex;flex-direction:column;align-items:flex-start;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
}
.bento-card--list{flex:none;width:736px;justify-content:center;gap:var(--space-5);padding:var(--space-6)}
.bento-card--gen{gap:var(--space-3);padding:var(--space-5) var(--space-6)}
.bento-card--cats{gap:var(--space-4);padding:var(--space-5) var(--space-6)}
.bento-card__text{display:flex;flex-direction:column;gap:var(--space-3)}
.bento-card__text p{font-size:14px;line-height:20px;color:var(--text-secondary)}
/* "ezee app — Vault, all items" (6065:28718): export includes its 1px drop shadow (-2,-1 / 674x304). */
.bento-card__visual{position:relative;width:100%;aspect-ratio:670/300}
.bento-card__visual img{position:absolute;left:-.3%;top:-.333%;width:100.6%;max-width:none;height:auto}
.bento-card__gen-art{width:100%;max-width:374px;height:auto;border-radius:var(--radius-lg)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chip{
  display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);
  background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius-pill);
  font-size:14px;line-height:20px;font-weight:500;color:var(--text-primary);
}
.chip__icon{display:flex;align-items:center;justify-content:center;flex:none;width:16px;height:16px}
.vault__row--three .bento-card{flex:1;min-width:0;height:316px}
.bento-card__well{width:100%}
.bento-card__well img{width:100%;height:auto}
.bento-card__caption{display:flex;flex-direction:column;gap:var(--space-2);padding:20px var(--space-5) var(--space-5)} /* Figma raw top 20 */
.bento-card__caption--top24{padding-top:var(--space-5)}
.bento-card__caption p{font-size:14px;line-height:20px;color:var(--text-secondary)}

/* ---------- 07 Tagline (6066:576) - static text, no reveal animation ---------- */
.tagline__text{max-width:880px}
.tagline__soft{color:var(--gray-400)} /* Figma raw #858d9d */

/* ---------- 10 Pricing preview (6056:419) ---------- */
.plans__grid{display:flex;align-items:center;gap:var(--space-5);margin-top:var(--space-7)}
.plan{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);flex:1;min-width:0;
  /* Figma strokes are inside: content sits 32px (Spacing/6) from the outer edge, so padding = 32 - stroke width */
  height:400px;padding:calc(var(--space-6) - 1px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);
}
.plan--rec{padding:calc(var(--space-6) - 2px);background:var(--brand-subtle);border:2px solid var(--brand);box-shadow:var(--shadow-raised)}
.plan__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%}
.plan__badge{padding:var(--space-1) var(--space-3);background:var(--brand);border-radius:var(--radius-pill);font-size:12px;line-height:16px;color:var(--text-on-brand);white-space:nowrap}
.plan__price{display:flex;align-items:baseline;gap:var(--space-1);white-space:nowrap;color:var(--text-primary)}
.plan__per,.plan__note{font-size:14px;line-height:20px;color:var(--text-secondary)}
.plan__divider{width:100%;height:1px;background:var(--border)}
.plan__list{display:flex;flex-direction:column;gap:var(--space-3);width:100%}
.plan__list li{display:flex;align-items:flex-start;gap:var(--space-2);font-size:14px;line-height:20px;color:var(--text-primary)}
.plan__check{display:flex;align-items:center;justify-content:center;flex:none;width:18px;height:18px}

/* ---------- 12 Final CTA "Just click to switch!" (6241:51417) ---------- */
.switch{overflow:hidden;background:var(--white);border-radius:var(--radius-lg)}
.switch__inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
  min-height:400.42px;padding:61px 46px 61px 62px; /* Figma raw insets; art export is 516 wide incl. overflow */
}
.switch__copy{display:flex;flex-direction:column;align-items:flex-start;gap:36px;flex:none;width:380px} /* Figma raw gap 36 */
.switch__logo{width:132px;height:auto}
.switch__text{display:flex;flex-direction:column;gap:var(--space-4)}
.switch__text h2{color:var(--black)}
.switch__art{flex:none;width:516px}
.switch__art img{width:100%;height:auto}

/* ============================================================
   Responsive - same content, re-flowed
   ============================================================ */
@media (max-width:1100px){
  .hero{height:auto;padding-block:var(--space-8)}
  .hero__copy{width:auto;max-width:583px;padding-top:0}
  .hero__art{position:static;width:min(589.5px,100%);margin:var(--space-7) auto 0}

  .tools__panel{flex-direction:column;align-items:stretch;gap:var(--space-7)}
  .tools__copy{width:auto}
  .tools__shots{flex:none;width:100%;margin-inline:auto}

  .why__grid{grid-template-columns:minmax(0,1fr)}

  .vault__head{flex-direction:column;align-items:flex-start}
  .vault__row{flex-direction:column}
  .bento-card--list{width:auto}

  .plan{height:auto;min-height:400px}

  .switch__inner{flex-direction:column;align-items:flex-start;padding:var(--space-7)}
  .switch__copy{width:auto;max-width:380px}
  .switch__art{width:min(516px,100%)}
}

@media (max-width:900px){
  .vault__row--three{flex-direction:column;max-width:560px;width:100%;margin-inline:auto}
  .vault__row--three .bento-card{height:auto}
  .plans__grid{flex-direction:column;align-items:stretch;max-width:560px;margin-inline:auto}
  .plan{min-height:0}
}

@media (max-width:640px){
  .hero{padding-block:var(--space-7)}
  .hero__actions .btn{flex:1}

  .platforms__inner{flex-direction:column;align-items:flex-start;gap:var(--space-4)}
  .platforms__list{flex-wrap:wrap;gap:var(--space-4) var(--space-6)}

  .tools__panel{padding:var(--space-5)}
  .tool-row__btn{min-height:44px}
  .tools__cloud{aspect-ratio:auto;padding:var(--space-7) var(--space-5);gap:var(--space-6)}

  .why-card,.why-card--tall{min-height:0}

  .vault__actions .btn{flex:1}
  .bento-card--list,.bento-card--gen,.bento-card--cats{padding:var(--space-5)}

  .switch__inner{padding:var(--space-6) var(--space-5)}
  .switch__copy{gap:var(--space-6)}
}