/* =====================================================================
   soon.css — the "Launching soon" layer of the Hostinger release.
   Release-only: copied in by _internal/release/build-release.py, after the
   page's own stylesheets. It styles
     .soon-flag   the pulsing "Launching soon" pill (hero, home stage)
     .soon-tag    the small "Soon" chip after a product name (menu, cards)
     .soon-card   the launch-notice form in the product hero
     .soon-plate  a product mark on a soft gradient, where a screen was
     .soon-win    the home page's software window, marks only
     .soon-grid / .soon-tile / .soon-others   the "Meanwhile" panel
   Everything uses the site's tokens, so the dark theme follows.
   ===================================================================== */

/* ---- the pill and the chip ---- */
.soon-flag{display:inline-flex;align-items:center;gap:.5rem;
  padding:.42rem .9rem .42rem .7rem;border-radius:var(--radius-full);
  font-size:var(--text-xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--color-primary) 28%,transparent);
  margin:0 0 var(--space-5);width:max-content;max-width:100%;}
.soon-flag [data-lucide]{width:.95rem;height:.95rem;flex:none;
  animation:soonTwinkle 2.6s ease-in-out infinite;}
@keyframes soonTwinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(1.25) rotate(12deg);opacity:.75}}
.edu-hero .st-hero-copy .soon-flag{display:flex;margin-top:var(--space-6);margin-bottom:0;}
.edu-hero .st-hero-copy .soon-flag + h1{margin-top:var(--space-4);}

.soon-tag{display:inline-block;vertical-align:.12em;margin-left:.35rem;padding:.12rem .45rem;border-radius:var(--radius-full);
  font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;line-height:1.4;
  color:var(--color-on-accent,#fff);background:linear-gradient(135deg,var(--color-primary),var(--color-teal));}
.hm-card-kick .soon-tag{vertical-align:.05em;}
.mega-link h4 .soon-tag{margin-left:.45rem;}
.drawer .sub a .soon-tag{margin-left:.5rem;}
.hm-chap-list .soon-tag{margin-left:.45rem;}

/* ---- a product mark where a screen used to be ---- */
.soon-plate{position:relative;display:grid;place-items:center;gap:.6rem;width:100%;aspect-ratio:3/2;
  border-radius:12px;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(70% 80% at 18% 12%,color-mix(in srgb,var(--color-primary) 22%,transparent),transparent 62%),
    radial-gradient(60% 70% at 88% 92%,color-mix(in srgb,var(--color-teal) 26%,transparent),transparent 60%),
    linear-gradient(150deg,color-mix(in srgb,var(--color-surface) 92%,var(--color-primary)),var(--color-surface));
  border:1px solid color-mix(in srgb,var(--color-primary) 14%,transparent);}
.soon-plate::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(color-mix(in srgb,var(--color-text) 6%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--color-text) 6%,transparent) 1px,transparent 1px);
  background-size:22px 22px;
  mask-image:radial-gradient(80% 80% at 50% 50%,#000 30%,transparent 100%);-webkit-mask-image:radial-gradient(80% 80% at 50% 50%,#000 30%,transparent 100%);}
.soon-plate img{width:auto;height:auto;max-width:58%;max-height:46%;object-fit:contain;display:block;
  filter:drop-shadow(0 10px 22px color-mix(in srgb,var(--color-text) 18%,transparent));}
.soon-plate em{font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--color-primary);
  padding:.28rem .6rem;border-radius:var(--radius-full);background:color-mix(in srgb,var(--color-surface) 80%,transparent);
  border:1px solid color-mix(in srgb,var(--color-primary) 22%,transparent);}
.soon-fig .soon-plate{border-radius:12px;}
.hm-m-figcard .soon-plate,.hm-m-bpcard .soon-plate{border-radius:10px;}
.hm-m-figcard .soon-plate img,.hm-m-bpcard .soon-plate img{max-width:64%;}
.hm-m-figcard .soon-plate em,.hm-m-bpcard .soon-plate em,.hm-l-fig .soon-plate em{font-size:.5rem;padding:.2rem .45rem;}
/* the BioMetriK platform cards keep their frame and 16/9 cut */
/* (the card shows the mark itself just below, so the plate carries the pill alone) */
.plat-shot.soon-shot .soon-plate{aspect-ratio:16/9;border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-bottom:0;}
.plat-shot.soon-shot .soon-plate img{display:none;}
.plat-shot.soon-shot .soon-plate em{font-size:var(--text-xs);padding:.5rem 1rem;letter-spacing:.16em;}

/* ---- the home page's software window ---- */
.soon-win .tscr-view{background:var(--color-surface);}
.soon-view-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.6rem,2.2vw,1.2rem);
  padding:clamp(.8rem,3vw,1.6rem);text-align:center;
  background:
    radial-gradient(60% 70% at 12% 10%,color-mix(in srgb,var(--color-primary) 20%,transparent),transparent 60%),
    radial-gradient(55% 65% at 90% 95%,color-mix(in srgb,var(--color-teal) 24%,transparent),transparent 60%),
    radial-gradient(40% 50% at 80% 10%,color-mix(in srgb,var(--color-magenta,#f95bf6) 12%,transparent),transparent 60%);}
.soon-view-in::before{content:"";position:absolute;inset:0;opacity:.45;pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb,var(--color-text) 6%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--color-text) 6%,transparent) 1px,transparent 1px);
  background-size:24px 24px;
  mask-image:radial-gradient(75% 75% at 50% 50%,#000 20%,transparent 100%);-webkit-mask-image:radial-gradient(75% 75% at 50% 50%,#000 20%,transparent 100%);}
.soon-view-in > *{position:relative;}
.soon-view-in .soon-flag{margin:0;}
.soon-marks{display:flex;align-items:center;justify-content:center;gap:clamp(.9rem,3.2vw,1.8rem);flex-wrap:wrap;max-width:92%;}
/* .tscr-view img is the slideshow rule (absolute, opacity 0): the marks are not slides */
.soon-view .soon-marks img{position:static;inset:auto;opacity:1;transform:none;display:block;width:auto;height:clamp(30px,6.2vw,48px);max-width:32%;object-fit:contain;
  filter:drop-shadow(0 8px 18px color-mix(in srgb,var(--color-text) 16%,transparent));}
.soon-view .soon-marks img.is-sq{height:clamp(40px,8vw,62px);}
.soon-view .soon-marks.one img.is-sq{height:clamp(56px,11vw,96px);max-width:60%;}
/* the hero stage: the course card and the DataViz card cover the window's
   bottom and right, so its content sits in the top-left */
.hm-stage .soon-view-in{align-items:flex-start;justify-content:flex-start;text-align:left;padding:7% 8%;gap:clamp(.6rem,2vw,1.1rem);}
.hm-stage .soon-marks{justify-content:flex-start;flex-wrap:nowrap;max-width:70%;gap:clamp(.7rem,2.4vw,1.3rem);}
.hm-stage .soon-view .soon-marks img{height:clamp(22px,4.6vw,30px);max-width:34%;}
.hm-stage .soon-view .soon-marks img.is-sq{height:clamp(34px,7vw,46px);}
.hm-stage .soon-view-t{display:none;}
@media (max-width:700px){ .hm-stage .soon-marks{max-width:60%;} }
/* the chapter window: the two cards cover its bottom corners, so the line
   comes before the mark and the mark stays in the middle */
.hm-m-win .soon-view-in{justify-content:flex-start;padding-top:7%;gap:clamp(.6rem,1.8vw,1rem);}
.hm-m-win .soon-view-t{order:1;max-width:26ch;}
.hm-m-win .soon-marks{order:2;width:100%;max-width:none;}
.hm-m-win .soon-view .soon-marks.one img.is-sq{height:clamp(48px,8vw,76px);max-width:40%;}
.soon-view-t{font-family:var(--font-display);font-weight:800;letter-spacing:-.01em;line-height:1.2;
  font-size:clamp(.78rem,1.6vw,1.05rem);color:var(--color-text);max-width:30ch;}
@media (min-width:1080px){ .hm-stage .soon-view .soon-marks img{height:30px;} .hm-stage .soon-view .soon-marks img.is-sq{height:46px;} }

/* ---- the launch-notice card in the hero ---- */
.soon-card{position:relative;display:flex;flex-direction:column;border-radius:var(--radius-2xl);overflow:hidden;
  border:1px solid color-mix(in srgb,var(--color-primary) 20%,var(--color-divider));}
.soon-card-art{position:relative;aspect-ratio:16/8;overflow:hidden;background:#140B35;isolation:isolate;}
.soon-card-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  filter:grayscale(1) contrast(1.03);}
.soon-card-art::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(140deg,#01284F 0%,#8C52FF 55%,#03F7EB 100%);mix-blend-mode:color;opacity:.85;}
.soon-card-art::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(0deg,rgba(6,4,20,.55) 0%,rgba(6,4,20,.12) 55%,rgba(6,4,20,.25) 100%);}
.soon-card-mark{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:3;
  display:grid;place-items:center;padding:.9rem 1.3rem;border-radius:var(--radius-xl);
  background:rgba(255,255,255,.94);box-shadow:0 18px 44px rgba(6,4,20,.35);}
.soon-card-mark img{display:block;width:auto;height:44px;max-width:180px;object-fit:contain;}
.soon-card-body{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6) var(--space-6) var(--space-6);}
.soon-card-body .eyebrow{margin-bottom:0;}
.soon-card-h{font-size:var(--text-xl);letter-spacing:-.02em;line-height:1.15;margin:0;}
.soon-card-p{font-size:var(--text-sm);color:var(--color-text-muted);margin:0 0 var(--space-2);}
.soon-form{display:grid;gap:var(--space-4);}
.soon-form .btn{margin-top:var(--space-1);}
.soon-form.is-busy .btn{opacity:.7;pointer-events:none;}
.soon-note{font-size:var(--text-xs);color:var(--color-text-faint,var(--color-text-muted));margin:0;line-height:1.5;}
.soon-note a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.soon-status{font-size:var(--text-xs);margin:0;min-height:1em;color:var(--color-text-muted);}
.soon-status.is-error{color:var(--color-gold-hover);font-weight:600;}
.soon-status:empty{display:none;}
.soon-done{display:grid;grid-template-columns:auto 1fr;column-gap:.8rem;row-gap:.25rem;align-items:start;
  padding:var(--space-5);border-radius:var(--radius-xl);
  background:color-mix(in srgb,var(--color-success,#1d9a6c) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--color-success,#1d9a6c) 28%,transparent);}
.soon-done [data-lucide]{grid-row:1 / span 2;width:1.5rem;height:1.5rem;color:var(--color-success,#1d9a6c);margin-top:.1rem;}
.soon-done b{font-family:var(--font-display);font-weight:800;font-size:var(--text-base);line-height:1.2;}
.soon-done span{font-size:var(--text-sm);color:var(--color-text-muted);}
.soon-done b span{font:inherit;color:inherit;}
@media (max-width:1079px){ .edu-hero .soon-card{margin-top:var(--space-10);max-width:560px;} }
@media (max-width:560px){ .soon-card-body{padding:var(--space-5);} .soon-card-mark img{height:36px;max-width:150px;} }

/* ---- Meanwhile: the four doors and the other two products ---- */
.soon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:var(--space-5);margin-top:var(--space-8);}
.soon-tile{display:flex;flex-direction:column;gap:.35rem;text-decoration:none;color:inherit;}
.soon-tile p{flex:1;}
.soon-tile .link-arrow{margin-top:var(--space-3);}
.soon-others{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:var(--space-4);margin-top:var(--space-10);max-width:960px;
  padding-top:var(--space-8);border-top:1px solid var(--color-divider);}
.soon-others-label{grid-column:1 / -1;margin:0 0 var(--space-1);font-size:var(--text-xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted);}
.soon-other{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-4);
  padding:var(--space-4) var(--space-5);border-radius:var(--radius-xl);text-decoration:none;color:inherit;
  background:var(--color-surface);border:1px solid var(--color-divider);transition:border-color var(--transition,.2s),transform var(--transition,.2s);}
.soon-other:hover{border-color:var(--color-primary);transform:translateY(-2px);}
.soon-other-mark{display:grid;place-items:center;width:84px;height:56px;border-radius:var(--radius-lg);
  background:color-mix(in srgb,var(--color-primary) 7%,transparent);border:1px solid color-mix(in srgb,var(--color-primary) 14%,transparent);}
.soon-other-mark img{display:block;width:auto;height:30px;max-width:66px;object-fit:contain;}
.soon-other-body{display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.soon-other-body b{font-family:var(--font-display);font-weight:800;font-size:var(--text-base);line-height:1.2;}
.soon-other-body span{font-size:var(--text-sm);color:var(--color-text-muted);}
.soon-other-body em{font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary);margin-top:.15rem;}
.soon-other > [data-lucide]{width:1.15rem;height:1.15rem;color:var(--color-primary);}

/* ---- dark theme: the white plates behind the marks stay legible ---- */
[data-theme="dark"] .soon-plate,[data-theme="dark"] .soon-other-mark{background:rgba(255,255,255,.92);}
[data-theme="dark"] .soon-plate em{background:rgba(255,255,255,.9);}
[data-theme="dark"] .soon-view-in{background-color:rgba(255,255,255,.92);}
[data-theme="dark"] .soon-view-t{color:#1a1633;}
[data-theme="dark"] .soon-view-in .soon-flag{background:rgba(124,58,237,.1);}

/* the marks are the registered logos, unaltered: no duotone, no cropping */
.soon-plate img,.soon-marks img,.soon-card-mark img,.soon-other-mark img{mix-blend-mode:normal;aspect-ratio:auto;object-fit:contain;border-radius:0;}