/* printMockup — Apple Exact Replica */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Manrope:wght@600;700;800&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#FFFFFF; --surface:#F5F5F7; --surface-2:#E8E8ED;
  --ink:#000000; --ink-2:#515154; --ink-3:#86868B; --ink-4:#A1A1A6;
  --line:rgba(0,0,0,.08); --line-2:rgba(0,0,0,.12);
  --gold:#0066CC; --gold-soft:rgba(0,102,204,.1); 
  --accent:#0066CC; --accent-soft:rgba(0,102,204,.1); /* Apple Blue */
  --success:#28CD41; --success-soft:rgba(40,205,65,.1);
  --r-sm:12px;--r-md:18px;--r-lg:28px;--r-xl:36px;--r-2xl:42px; /* Extra rounded */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  --sh-1:none; --sh-2:none; --sh-3:none; /* Apple bento boxes rarely have shadows */
}
html{font-size:16px;scroll-behavior:smooth;background:var(--bg)}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.47059;letter-spacing:-.022em;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11";padding-top:60px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}

.wrap{max-width:70%;margin:0 auto;padding:0 32px}
.wrap-tight{max-width:920px;margin:0 auto;padding:0 32px}

/* ---------- Top nav (Shared Dark #181818 Nav) ---------- */
.main-page-topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;
  display: grid !important;
  grid-template-columns: 140px 1fr 140px !important;
  align-items: center !important;
  padding: 0 20px !important;
  height: 48px !important;
  background: #181818 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
}

.topbar{position:fixed;top:0;left:0;right:0;z-index:9999;height:60px;background:rgba(255,255,255,0.8);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);padding:0;border-bottom:1px solid rgba(0,0,0,0.05)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;max-width:1024px;margin:0 auto;height:100%;padding:0 22px;border:none;border-radius:0;box-shadow:none;background:transparent;backdrop-filter:none}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px;color:var(--ink);letter-spacing:-.02em;font-family:'Sora','Manrope',-apple-system,sans-serif !important;}
.brand span, .brand-logo-text, .logo-text, .plugin-tab, [data-cms-key="brand.name"], footer .brand span {font-family:'Sora','Manrope',-apple-system,sans-serif !important;font-weight:600 !important;letter-spacing:-.02em !important;}
.brand-mark{width:26px;height:26px;display:grid;place-items:center;flex-shrink:0;line-height:0}
.brand em{display:none} /* Hide secondary text in nav for minimalism */
.navlinks{display:flex;gap:36px}
.navlinks a{font-size:14px;color:var(--ink-2);transition:color .3s;font-weight:400;letter-spacing:-.01em;opacity:0.8}
.navlinks a:hover{color:var(--ink);opacity:1}
.mac-nav-links a{color:rgba(255,255,255,0.7);font-size:15px;font-weight:500;text-decoration:none;transition:color 0.2s ease;}
.mac-nav-links a:hover{color:#ffffff !important}
.navlinks a.is-active{color:var(--ink);opacity:1}
.navactions{display:flex;gap:20px;align-items:center}
.navactions .btn{background:transparent !important;color:var(--ink) !important;box-shadow:none !important;padding:0 !important;font-size:14px !important;opacity:0.8;border:none !important}
.navactions .btn:hover{opacity:1;text-decoration:none}
.navactions .btn-primary{background:var(--ink) !important;color:#fff !important;padding:6px 16px !important;border-radius:980px !important;opacity:1;font-weight:500 !important}

/* Mobile Nav Elements */
.mobile-menu-btn{display:none;background:none;border:none;color:var(--ink);padding:8px;cursor:pointer;margin-right:-8px}
.mobile-menu-btn svg{display:block;transition:transform 0.3s}
.menu-line-1,.menu-line-2,.menu-line-3{transition:all 0.3s cubic-bezier(0.4,0,0.2,1);transform-origin:center}
.topbar.is-open .menu-line-1{transform:translateY(5px) rotate(45deg)}
.topbar.is-open .menu-line-2{opacity:0}
.topbar.is-open .menu-line-3{transform:translateY(-5px) rotate(-45deg)}

.mobile-nav{position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid rgba(0,0,0,0.05);padding:16px 24px 24px;display:flex;flex-direction:column;gap:16px;box-shadow:0 10px 30px rgba(0,0,0,0.05);transform:translateY(-10px);opacity:0;visibility:hidden;transition:all 0.3s cubic-bezier(0.16,1,0.3,1);z-index:-1}
.mobile-nav a{font-size:15px;color:var(--ink-2);font-weight:500;padding:8px 0;transition:color 0.2s}
.mobile-nav a.is-active{color:var(--ink)}
.topbar.is-open .mobile-nav{transform:translateY(0);opacity:1;visibility:visible}

/* Responsive Mobile Topbar Header */
.mobile-menu-toggle-btn {
  display: none;
  background: none;
  border: none;
  color: #ffffff;
  padding: 6px;
  cursor: pointer;
}

.mobile-nav-dropdown {
  display: none;
  position: fixed;
  top: 44px;
  left: 0;
  right: 0;
  background: #141414;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 20px 24px;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
  z-index: 99998;
}

.mobile-nav-dropdown.is-active {
  display: flex;
}

.mobile-nav-dropdown a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-nav-dropdown .mobile-download-btn {
  background: #ffffff;
  color: #000000 !important;
  font-weight: 600;
  text-align: center;
  padding: 10px 16px;
  border-radius: 980px;
  border-bottom: none;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .main-page-topbar {
    display: flex !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
  }
  .mac-nav-links, .topbar-divider-line, .desktop-download-btn {
    display: none !important;
  }
  .mobile-menu-toggle-btn {
    display: flex !important;
  }
}

/* ---------- High-Contrast Professional Free Text ---------- */
.free-badge {
  display: inline !important;
  background: transparent !important;
  color: #38BDF8 !important;
  font-weight: 800 !important;
  font-size: 1.25em !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  letter-spacing: -0.01em;
}

.free-badge:hover {
  background: #0077ED;
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.5);
  transform: translateY(-1px);
}

/* ---------- Buttons & Links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:14px;font-weight:400;padding:8px 16px;border-radius:980px;border:1px solid transparent;transition:all .3s;white-space:nowrap;letter-spacing:-.01em}
.btn-primary{background:#0066CC;color:#fff;box-shadow:none}
.btn-primary:hover{background:#0077ED}
.btn-gold{background:#000000;color:#fff}
.btn-gold:hover{background:#000}
.btn-line{background:transparent;color:#0066CC;border-color:#0066CC}
.btn-line:hover{background:#0066CC;color:#fff}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{text-decoration:underline}
.btn-sm{font-size:12px;padding:4px 12px}
.btn-lg{font-size:17px;padding:12px 24px}

/* ---------- Typography ---------- */
.display{font-family:var(--font-display);font-weight:600;letter-spacing:-.04em;line-height:1.05}
.h-xl{font-size:clamp(64px,8vw,120px);font-weight:700;letter-spacing:-.05em}
.h-lg{font-size:clamp(48px,6vw,80px);font-weight:600}
.h-md{font-size:clamp(32px,4vw,48px);font-weight:600;letter-spacing:-.03em}
.h-sm{font-size:24px;font-weight:600;letter-spacing:-.02em}
.body-lg{font-size:21px;color:var(--ink-2);line-height:1.4;max-width:56ch;letter-spacing:-.015em;font-weight:400}
.body{font-size:17px;color:var(--ink-2);line-height:1.47059;letter-spacing:-.022em;font-weight:400}
.body-sm{font-size:14px;color:var(--ink-3);line-height:1.4}
.mono{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:0.1em;font-weight:700}

/* ---------- Eyebrow & chips ---------- */
.eyebrow{font-size:17px;font-weight:600;letter-spacing:-.022em;color:#0066CC;display:block;margin-bottom:8px;text-transform:none}
.eyebrow .dot{display:none} /* Apple doesn't use dots here */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:99px;background:#E8E8ED;border:1px solid transparent;color:var(--ink);letter-spacing:-.01em}
.chip-gold{background:#000000;border-color:transparent;color:#fff}
.chip-success{background:var(--success-soft);border-color:transparent;color:var(--success)}
.chip-accent{background:var(--accent-soft);border-color:transparent;color:var(--accent)}

/* ---------- Layout Overrides (Forcing Apple Look) ---------- */
.sect{padding:140px 0;position:relative;background:var(--bg)}
.sect-sm{padding:100px 0;position:relative;background:var(--bg)}

/* Force Hero Centering (Since HTML has a grid) */
.sect:first-of-type .wrap > div{display:flex !important;flex-direction:column !important;align-items:center !important;text-align:center !important;gap:64px !important}
.sect:first-of-type .wrap > div > div:first-child{display:flex;flex-direction:column;align-items:center}
.sect:first-of-type .wrap > div > div:last-child{width:100%;max-width:800px;margin:0 auto}

/* Force Headers Centered generally */
.eyebrow{justify-content:center}

/* ---------- Bento Cards ---------- */
.card{background:var(--surface);border:none;border-radius:var(--r-lg);padding:40px;box-shadow:none;transition:transform .3s}
.card-flat{background:var(--surface);border-radius:var(--r-lg);padding:40px}
.card-feature{background:var(--surface);border:none;box-shadow:none}

/* ---------- Window mock ---------- */
.win{background:#fff;border-radius:12px;border:1px solid rgba(0,0,0,0.08);box-shadow:0 40px 100px -20px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.02);overflow:hidden}
.win-bar{display:flex;align-items:center;gap:12px;padding:14px 20px;background:#F9F9FB;border-bottom:1px solid rgba(0,0,0,0.05)}
.win-dot{width:12px;height:12px;border-radius:50%}
.win-dot.r{background:#FF5F56;box-shadow:inset 0 0 0 0.5px rgba(0,0,0,0.1)}.win-dot.y{background:#FFBD2E;box-shadow:inset 0 0 0 0.5px rgba(0,0,0,0.1)}.win-dot.g{background:#27C93F;box-shadow:inset 0 0 0 0.5px rgba(0,0,0,0.1)}
.win-title{font-family:var(--font);font-size:13px;color:#86868B;position:absolute;left:50%;transform:translateX(-50%);font-weight:500;letter-spacing:-0.01em}

/* ---------- Image frames ---------- */
.imgframe{position:relative;border-radius:var(--r-md);overflow:hidden;background:transparent;border:none}
.imgframe img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--r-md)}
.imgframe-tall{aspect-ratio:3/4}
.imgframe-square{aspect-ratio:1/1}
.imgframe-wide{aspect-ratio:16/10}

/* ---------- Pill Marquee ---------- */
.mq-mask{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.mq-track{display:flex;gap:10px;align-items:center;white-space:nowrap;will-change:transform}
.mq-fwd{animation:mq-scroll-fwd 35s linear infinite}
.mq-rev{animation:mq-scroll-rev 40s linear infinite}
@keyframes mq-scroll-fwd{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mq-scroll-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.mq-pill{display:inline-flex;align-items:center;padding:9px 18px;background:var(--surface);border:1px solid var(--line-2);border-radius:999px;font-size:14px;font-weight:500;color:var(--ink-2);letter-spacing:-.01em;flex-shrink:0;transition:background .2s,color .2s}
.mq-pill-dim{background:transparent;border-color:var(--line);color:var(--ink-4)}

/* ---------- Stats Strip ---------- */
.stats-strip{background:#FFFFFF;padding:0 0;border-top:1px solid rgba(0,0,0,0.05);border-bottom:1px solid rgba(0,0,0,0.05)}
.stats-strip-inner{max-width:1180px;margin:0 auto;padding:0 32px;display:flex;align-items:stretch}
.sstat{flex:1;padding:52px 40px;display:flex;flex-direction:column;gap:6px;transition:transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.5s ease;border-radius:24px}
.sstat:hover{transform:translateY(-8px);background:rgba(0,102,204,0.02)}
.sstat-divider{width:1px;background:rgba(0,0,0,.08);flex-shrink:0;margin:40px 0}
.sstat-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.sstat-num{font-family:var(--font-display);font-size:clamp(56px,6vw,88px);font-weight:800;letter-spacing:-.05em;color:var(--ink);line-height:1;margin:8px 0 0;font-variant-numeric:tabular-nums}
.sstat-unit{font-size:clamp(32px,3.5vw,52px);font-weight:400;letter-spacing:-.03em;color:var(--ink-4);margin-left:2px}
.sstat-gold{background:linear-gradient(135deg,#0077ED,#004499);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sstat-stars{display:flex;gap:3px;font-size:18px;color:var(--accent);margin:2px 0 4px}
.sstat-stars span{display:inline-block;transition:transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)}
.sstat:hover .sstat-stars span{transform:scale(1.2)}
.sstat:hover .sstat-stars span:nth-child(2){transition-delay:0.05s}
.sstat:hover .sstat-stars span:nth-child(3){transition-delay:0.1s}
.sstat:hover .sstat-stars span:nth-child(4){transition-delay:0.15s}
.sstat:hover .sstat-stars span:nth-child(5){transition-delay:0.2s}
.sstat-desc{font-size:14px;font-weight:500;color:var(--ink-3);line-height:1.4;margin-top:2px}
@media(max-width:980px){.stats-strip-inner{flex-wrap:wrap}.sstat{flex:1 1 40%}.sstat-divider{display:none}}

/* ---------- Three Paths Pricing Grid ---------- */
.paths-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:0;border-radius:var(--r-2xl);overflow:hidden;border:1px solid rgba(0,0,0,0.08)}
.path-card{background:#F5F5F7;display:flex;flex-direction:column;border-right:1px solid rgba(0,0,0,0.06);height:100%}
.path-card:last-child{border-right:none}
.path-card-dark{background:#000000;border-right:1px solid rgba(255,255,255,0.15)}
.path-card-top{padding:44px 40px 36px;display:flex;flex-direction:column;flex:1}
.path-tag{display:inline-flex;align-items:center;padding:5px 13px;border-radius:99px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:var(--surface-2);color:var(--ink-3);width:fit-content}
.path-tag-dark{background:rgba(255,255,255,.1);color:rgba(255,255,255,.55)}
.path-price-block{margin:16px 0 0; min-height:76px; display:flex; flex-direction:column; justify-content:flex-end;}
.path-price{font-family:var(--font-display);font-size:44px;font-weight:700;letter-spacing:-.04em;color:var(--ink);line-height:1}
.path-price-unit{font-size:20px;font-weight:400;letter-spacing:-.02em;color:var(--ink-3);margin-left:2px}
.path-price-alt{font-size:13px;color:var(--ink-4);margin-top:4px}
.path-title{font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1.2;color:var(--ink);margin:16px 0 10px; min-height:62px; display:flex; align-items:center;}
.path-body{font-size:14.5px;color:var(--ink-2);line-height:1.55;letter-spacing:-.01em; min-height:72px;}
.path-actions{display:flex;flex-direction:row;align-items:center;gap:16px;margin-top:auto;padding-top:24px;min-height:44px}
.path-features{padding:28px 40px 40px;display:flex;flex-direction:column;gap:0;border-top:1px solid rgba(0,0,0,0.12);background:inherit;}
.path-features-dark{border-top:1px solid rgba(255,255,255,0.18)}
.path-feature{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid rgba(0,0,0,0.08);min-height:68px;box-sizing:border-box;}
.path-features-dark .path-feature{border-bottom:1px solid rgba(255,255,255,0.12)}
.path-feature:last-child{border-bottom:none}
.path-check{width:18px;height:18px;flex-shrink:0;margin-top:2px}
.path-feature div{display:flex;flex-direction:column;gap:2px}
.path-feature strong{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.path-feature span{font-size:13px;color:var(--ink-3);line-height:1.4}
@media(max-width:980px){.paths-grid{grid-template-columns:1fr}.path-card-top,.path-features{padding-left:24px;padding-right:24px}}

/* ---------- Divider band ---------- */
.divider-row{display:grid;border-top:none;border-bottom:none}
.divider-cell{padding:40px 24px;border-left:none;text-align:center}
.divider-cell:first-child{border-left:none}

.section-divider {
  max-width: 1180px;
  margin: 0 auto;
  height: 1px;
  background: var(--line);
  opacity: 0.6;
}

/* ---------- Underline link ---------- */
.ulink{color:#0066CC;border-bottom:none;padding-bottom:0;transition:opacity .3s;font-weight:400}
.ulink::after{content:" 〉";font-size:0.8em}
.ulink:hover{opacity:0.7}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;background:none;border:none;padding:28px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;color:var(--ink);font-size:21px;font-weight:600;letter-spacing:-.015em}
.faq-toggle{width:32px;height:32px;border-radius:50%;border:none;display:grid;place-items:center;font-size:24px;color:var(--ink-3);flex-shrink:0;transition:transform .3s;font-weight:300}
.faq-item.open .faq-toggle{transform:rotate(45deg);color:var(--ink)}
.faq-a{font-size:17px;color:var(--ink-2);line-height:1.47059;padding-bottom:32px;padding-right:56px;max-width:64ch;display:none;letter-spacing:-.022em}
.faq-item.open .faq-a{display:block}

/* ---------- Footer ---------- */
.footer{padding:80px 0 32px;border-top:1px solid var(--line);background:#FFFFFF}

/* ---------- Comparison table ---------- */
.cmp{border:none;border-radius:0;overflow:hidden;background:transparent}
.cmp-row{display:grid;grid-template-columns:2.4fr 1fr 1fr;padding:20px 24px;border-bottom:1px solid var(--line);font-size:14px;align-items:center}
.cmp-row:first-child{border-bottom:2px solid var(--line);background:transparent;font-weight:600}
.cmp-val{text-align:center}
.val-yes{color:var(--ink);font-weight:600}
.val-no{color:var(--ink-4)}
.val-mid{color:var(--ink-3)}

/* ---------- Segmented Control (Tabs) ---------- */
.segmented-control {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  padding: 6px;
  background: rgba(0,0,0,0.05);
  border-radius: 100px;
  box-shadow: none;
  position: relative;
  gap: 4px;
  border: 1px solid rgba(0,0,0,0.02);
  width: auto !important;
  max-width: fit-content !important;
}

.segmented-control button {
  position: relative;
  z-index: 2;
  padding: 10px 24px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: none;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .segmented-control {
    width: auto !important;
    max-width: 95vw !important;
    margin: 0 auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }
  .segmented-control button {
    font-size: 13px;
    padding: 10px 16px;
    white-space: nowrap !important;
  }
}

.segmented-control button svg {
  width: 18px;
  height: 18px;
  opacity: 0.5;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.segmented-control button.active {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.segmented-control button.active svg {
  opacity: 1;
  color: var(--accent);
}

.segmented-control button:hover:not(.active) {
  color: var(--ink);
  background: rgba(0,0,0,0.03);
}

/* ---------- Step row ---------- */
.steprow{display:flex;gap:24px;padding:40px;background:var(--surface);border:none;border-radius:var(--r-lg);align-items:flex-start;box-shadow:none}
.stepnum{width:36px;height:36px;border-radius:50%;background:var(--surface);color:var(--ink-3);display:grid;place-items:center;font-size:12px;font-weight:700;flex-shrink:0;font-family:var(--mono);border:1px solid var(--line)}

/* ---------- Interactive Timeline ---------- */
.how-timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 0;
}
.how-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 32px;
  width: 2px;
  background: linear-gradient(180deg, var(--accent) 0%, rgba(0,102,204,0.1) 100%);
  opacity: 0.3;
}
.timeline-step {
  position: relative;
  display: flex;
  gap: 48px;
  padding-bottom: 80px;
  align-items: flex-start;
}
.timeline-step:last-child {
  padding-bottom: 0;
}
.step-indicator {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
}
.step-dot {
  width: 12px;
  height: 12px;
  background: var(--bg);
  border: 2px solid var(--accent);
  border-radius: 50%;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 0 4px var(--bg);
}
.timeline-step:hover .step-dot {
  transform: scale(1.5);
  background: var(--accent);
  box-shadow: 0 0 20px var(--accent-soft), 0 0 0 6px var(--bg);
}
.step-card {
  flex: 1;
  background: var(--bg);
  padding: 32px;
  border-radius: 24px;
  border: 1px solid var(--line);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
}
.timeline-step:hover .step-card {
  transform: translateX(12px);
  border-color: var(--accent-soft);
  box-shadow: 0 20px 40px rgba(0,0,0,0.04), 0 0 0 1px var(--accent-soft);
}
.step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.step-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.1em;
}
.step-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.step-body {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.6;
  margin-top: 12px;
}
@media (max-width: 768px) {
  .how-timeline::before { left: 20px; }
  .timeline-step { gap: 24px; padding-bottom: 48px; }
  .step-indicator { width: 40px; }
  .step-card { padding: 24px; }
  .timeline-step:hover .step-card { transform: translateY(-4px); }
}

/* ---------- Bento Need Section ---------- */
.need-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.need-card {
  background: var(--bg);
  border-radius: 32px;
  padding: 40px;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 32px;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.sect-dark .need-card {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}
.need-card:hover {
  transform: translateY(-10px);
  border-color: var(--accent-soft);
  box-shadow: 0 30px 60px rgba(0,0,0,0.06), 0 0 0 1px var(--accent-soft);
}
.sect-dark .need-card:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 40px 80px rgba(0,0,0,0.3);
}
.need-visual {
  height: 200px;
  background: var(--surface-2);
  border-radius: 20px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.sect-dark .need-visual {
  background: rgba(0,0,0,0.2);
}
.need-card:hover .need-visual {
  background: var(--accent-soft);
}
.sect-dark .need-card:hover .need-visual {
  background: rgba(0,102,204,0.15);
}
.need-content h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
  letter-spacing: -0.03em;
}
.sect-dark .need-content h3 {
  color: #fff;
}
.need-content p {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.5;
}
.sect-dark .need-content p {
  color: rgba(255,255,255,0.6);
}
/* PSD Visual */
.psd-layers {
  width: 100px;
  height: 120px;
  position: relative;
}
.psd-layer {
  position: absolute;
  width: 80px;
  height: 80px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  transition: all 0.4s ease;
}
.sect-dark .psd-layer {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.15);
}
.psd-layer:nth-child(1) { top: 0; left: 20px; z-index: 3; }
.psd-layer:nth-child(2) { top: 20px; left: 10px; z-index: 2; opacity: 0.6; }
.psd-layer:nth-child(3) { top: 40px; left: 0; z-index: 1; opacity: 0.3; }
.need-card:hover .psd-layer:nth-child(1) { transform: translate(10px, -10px); }
.need-card:hover .psd-layer:nth-child(3) { transform: translate(-10px, 10px); }

/* PNG Visual */
.png-grid {
  display: grid;
  grid-template-columns: repeat(3, 30px);
  gap: 12px;
}
.png-item {
  width: 30px;
  height: 30px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  transition: all 0.3s ease;
}
.sect-dark .png-item {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
}
.need-card:hover .png-item {
  transform: scale(1.1);
  border-color: var(--accent);
}
@media (max-width: 900px) {
  .need-bento { grid-template-columns: 1fr; }
  .need-plus { display: none; }
}
.service-diag {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.step-pro {
  padding: 48px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: background 0.3s ease;
}
.step-pro:last-child {
  border-right: none;
}
.step-pro:hover {
  background: #FAFAFB;
}
.step-pro-label {
  font-family: var(--mono);
  font-size: 10px;
}

/* ---------- Service Workflow Redesign ---------- */
.service-redesign-section {
  position: relative;
}

.service-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(0, 102, 204, 0.08);
  border: 1px solid rgba(0, 102, 204, 0.2);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #0066CC;
}

.service-pulse {
  width: 8px;
  height: 8px;
  background: #0066CC;
  border-radius: 50%;
  box-shadow: 0 0 0 rgba(0, 102, 204, 0.4);
  animation: servicePulse 2s infinite;
}

@keyframes servicePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 102, 204, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(0, 102, 204, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 102, 204, 0);
  }
}

.service-gradient-text {
  background: linear-gradient(135deg, #0066CC 0%, #004080 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.service-flow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  margin-bottom: 56px;
}

.service-flow-connector {
  position: absolute;
  top: 40px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: rgba(0, 102, 204, 0.12);
  z-index: 1;
}

.connector-pulse-dot {
  position: absolute;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0066CC;
  box-shadow: 0 0 10px #0066CC, 0 0 20px #0066CC;
  animation: connectorFlow 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes connectorFlow {
  0% { left: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.service-step-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  padding: 32px 28px;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.service-step-card:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 102, 204, 0.3);
  box-shadow: 0 20px 40px rgba(0, 102, 204, 0.1), 0 0 0 1px rgba(0, 102, 204, 0.2);
}

.service-step-card.highlight-step {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F8FE 100%);
  border-color: rgba(0, 102, 204, 0.2);
}

.step-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.step-number-badge {
  font-family: var(--mono, monospace);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-3);
  background: rgba(0, 0, 0, 0.04);
  padding: 4px 12px;
  border-radius: 980px;
}

.step-number-badge.accent {
  color: #0066CC;
  background: rgba(0, 102, 204, 0.1);
}

.step-icon-glow {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0, 102, 204, 0.06);
  border: 1px solid rgba(0, 102, 204, 0.15);
  display: grid;
  place-items: center;
  transition: all 0.3s ease;
}

.service-step-card:hover .step-icon-glow {
  background: #0066CC;
  border-color: #0066CC;
  transform: scale(1.1) rotate(4deg);
}

.service-step-card:hover .step-icon-glow svg {
  stroke: #ffffff;
}

.step-card-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}

.step-card-desc {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 0 20px;
  flex: 1;
}

.step-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.service-trust-banner {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  padding: 28px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  flex-wrap: wrap;
}

.trust-banner-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.shield-badge-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(52, 199, 89, 0.1);
  border: 1px solid rgba(52, 199, 89, 0.25);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

@media (max-width: 992px) {
  .service-flow-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .service-flow-connector {
    display: none;
  }
}

@media (max-width: 600px) {
  .service-flow-grid {
    grid-template-columns: 1fr;
  }
  .service-trust-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-4);
  letter-spacing: 0.12em;
}
.step-pro-icon {
  width: 24px;
  height: 24px;
  color: var(--accent);
}
.step-pro h3 {
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.step-pro p {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.6;
}

.pro-note {
  margin-top: 32px;
  padding: 16px 24px;
  background: var(--surface);
  border-radius: var(--r-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-size: 14px;
  color: var(--ink-2);
}

/* ---------- Feature Grid ---------- */
.feature-cell {
  background: #fff;
  padding: 56px 48px;
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.feature-cell:hover {
  background: #FAFAFB;
}
.feature-icon {
  width: 24px;
  height: 24px;
  background: transparent;
  display: grid;
  place-items: center;
  color: var(--accent);
  margin-bottom: 0;
}
.feature-cell h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 8px;
}
.feature-cell p {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.7;
  opacity: 0.9;
}

/* ---------- Apple Tech Specs Comparison ---------- */
.hero-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
}
.hero-compare-card {
  border-radius: 32px;
  padding: 64px;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-compare-card.old-way {
  background: #F5F5F7;
}
.hero-compare-card.new-way {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 40px 100px rgba(0,0,0,0.08), 0 0 0 1px rgba(255,255,255,0.4);
  position: relative;
  overflow: hidden; /* Hide the sweep */
  transform: scale(1.04);
  z-index: 2;
}

/* Animated Glass Sweep with Color Shift */
.hero-compare-card.new-way::after {
  content: "";
  position: absolute;
  top: 0;
  left: -250%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    105deg,
    rgba(255,255,255,0) 0%,
    rgba(0,122,255,0.1) 40%,
    rgba(255,255,255,0.5) 50%,
    rgba(52,199,89,0.1) 60%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  animation: glass-sweep 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 1s;
}

@keyframes glass-sweep {
  0% { left: -250%; opacity: 0; }
  10% { opacity: 1; }
  30% { left: 250%; opacity: 1; }
  35% { opacity: 0; }
  100% { left: 250%; opacity: 0; }
}

/* Ambient Organic Glows (Randomized Movement) */
.hero-compare-card.new-way::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -20%;
  right: -20%;
  bottom: -20%;
  background: 
    radial-gradient(circle at 30% 30%, rgba(0, 122, 255, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(52, 199, 89, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 50% 20%, rgba(255, 45, 85, 0.05) 0%, transparent 40%);
  filter: blur(60px);
  z-index: -1;
  pointer-events: none;
  animation: organic-glow 20s ease-in-out infinite alternate;
}

@keyframes organic-glow {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  33% { transform: translate(-8%, 12%) scale(1.1) rotate(2deg); }
  66% { transform: translate(12%, -8%) scale(0.9) rotate(-2deg); }
  100% { transform: translate(-4%, -4%) scale(1.05) rotate(1deg); }
}

.hero-card-header {
  margin-bottom: 24px;
}
.hero-card-header h3 {
  font-size: 21px;
  font-weight: 600;
  color: var(--ink-2);
  margin: 0;
  letter-spacing: -0.01em;
}
.hero-compare-card.new-way .hero-card-header h3 {
  color: var(--ink);
}
.stat-huge {
  font-size: 84px;
  font-weight: 800;
  letter-spacing: -0.06em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 12px;
}
.hero-compare-card.old-way .stat-huge {
  color: #86868B;
}
.stat-sub {
  font-size: 19px;
  color: #86868B;
  font-weight: 500;
  margin-bottom: 64px;
  letter-spacing: -0.01em;
}

/* Staggered build for specs */
.hero-compare-specs {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.spec-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 0;
  border-top: 1px solid rgba(0,0,0,0.06);
  
  /* Entrance state */
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-compare-grid.is-revealed .spec-item {
  opacity: 1;
  transform: translateY(0);
}

/* Delay build indices */
.hero-compare-grid.is-revealed .spec-item:nth-child(1) { transition-delay: 0.4s; }
.hero-compare-grid.is-revealed .spec-item:nth-child(2) { transition-delay: 0.55s; }
.hero-compare-grid.is-revealed .spec-item:nth-child(3) { transition-delay: 0.7s; }
.hero-compare-grid.is-revealed .spec-item:nth-child(4) { transition-delay: 0.85s; }

.spec-label-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.spec-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #86868B;
}
.spec-value {
  font-size: 21px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.hero-compare-card.old-way .spec-value {
  color: #86868B;
}

/* Hover refinement */
.hero-compare-card:hover {
  /* Removed hover momentum */
}

@media (max-width: 900px) {
  .hero-compare-grid { grid-template-columns: 1fr; }
  .stat-huge { font-size: 64px; }
  .hero-compare-card { padding: 40px; }
}
/* ---------- Utility ---------- */
.flex{display:flex}.col{flex-direction:column}.between{justify-content:space-between}
.center{align-items:center;justify-content:center}.aic{align-items:center}
.gap-xs{gap:8px}.gap-sm{gap:12px}.gap-md{gap:20px}.gap-lg{gap:40px}
.tac{text-align:center}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.breadcrumb{font-family:var(--font);font-size:12px;letter-spacing:-.01em;text-transform:none;color:var(--ink-4);margin-bottom:24px;font-weight:400}
.breadcrumb a{color:var(--ink-2);transition:color .3s}
.breadcrumb a:hover{color:var(--ink)}

/* ── Watermark Overlay ── */
.watermarked-container {
  position: relative;
  display: block;
  overflow: hidden;
}
.watermarked-container::after {
  content: "printMockup.com";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-size: 2.5rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.15);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
  z-index: 5;
}
.watermarked-container.dark::after {
  color: rgba(0, 0, 0, 0.08);
}
/* ---------- Legal pages ---------- */
.legal {
  max-width: 720px; 
  margin: 0 auto;
}

.legal h2 {
  font-size: 26px;
  font-weight: 700;
  margin: 64px 0 24px;
  letter-spacing: -0.03em;
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding-top: 48px;
}

.legal h2:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.legal h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 32px 0 16px;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.legal p {
  font-size: 18px;
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: 24px;
  letter-spacing: -0.015em;
}

.legal ul {
  margin: 0 0 32px 24px;
}

.legal ul li {
  font-size: 18px;
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: 12px;
  letter-spacing: -0.015em;
}

.legal-summary {
  background: var(--surface-2);
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 64px;
  border: 1px solid rgba(0,0,0,0.03);
}

.legal-summary strong {
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 12px;
}

.legal-summary p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}

/* ---------- Responsive: Tablet (max-width: 980px) ---------- */
@media (max-width:980px){
  .navlinks{display:none}
  .navactions{display:none}
  .mobile-menu-btn{display:block}
  .grid-2,.grid-3{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .wrap,.wrap-tight{padding:0 24px}
  .topbar-inner{padding:0 16px}
  .sect{padding:100px 0}
  .sect-sm{padding:60px 0}
  .h-xl{font-size:56px}
  .h-lg{font-size:40px}

  /* Hero section */
  .sect:first-of-type{padding-top:72px !important;padding-bottom:80px !important}

  /* Two Paths grid */
  .paths-grid{grid-template-columns:1fr !important}

  /* How it works - automator panel */
  [style*="grid-template-columns:1fr 1.3fr"]{grid-template-columns:1fr !important;gap:48px !important}
  [style*="grid-template-columns:260px 1fr"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns:260px 1fr"] > div:first-child{border-right:none !important;border-bottom:1px solid rgba(0,0,0,0.05);padding:24px !important}
  [style*="grid-template-columns:260px 1fr"] > div:last-child{padding:24px !important}

  /* Service page hero grid */
  [style*="grid-template-columns:1.05fr .95fr"]{grid-template-columns:1fr !important;gap:40px !important}

  /* What to send grid */
  [style*="grid-template-columns:.9fr 1.1fr"]{grid-template-columns:1fr !important;gap:40px !important}

  /* Service flow diagram */
  .service-diag{grid-template-columns:1fr 1fr !important}
  .step-pro{border-right:none !important;border-bottom:1px solid var(--line)}
  .step-pro:nth-child(2n){border-right:none !important}
  .step-pro:last-child{border-bottom:none}

  /* Stats strip */
  .stats-strip-inner{flex-wrap:wrap}
  .sstat{flex:1 1 40%;padding:36px 24px}
  .sstat-divider{display:none}

  /* Final CTA */
  [style*="grid-template-columns:1.4fr 1fr"]{grid-template-columns:1fr !important;gap:32px !important}

  /* Footer grid */
  [style*="grid-template-columns:1.6fr 1fr 1fr 1fr 1fr"]{grid-template-columns:1fr 1fr 1fr !important;gap:32px !important}

  /* Comparison table */
  .cmp-row{grid-template-columns:1.8fr 1fr 1fr;padding:16px 18px;font-size:13px}

  /* Feature grid */
  .feature-cell{padding:40px 32px}

  /* FAQ */
  .faq-q{font-size:18px}
  .faq-a{padding-right:32px}
}

/* ---------- Responsive: Small Tablet / Large Phone (max-width: 768px) ---------- */
@media (max-width:768px){
  body{padding-top:55px}
  .topbar{height:55px}
  .wrap,.wrap-tight{padding:0 20px}
  .sect{padding:72px 0}
  .sect-sm{padding:48px 0}
  .h-xl{font-size:44px}
  .h-lg{font-size:34px}
  .h-md{font-size:28px}
  .body-lg{font-size:18px}
  .display{letter-spacing:-.03em}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .btn-lg{font-size:15px;padding:12px 22px}

  /* Hero */
  .sect:first-of-type{padding-top:56px !important;padding-bottom:64px !important}
  .sect:first-of-type h1{font-size:clamp(40px,9vw,56px) !important}
  .sect:first-of-type .body-lg{font-size:18px !important}

  /* Hero pill bar */
  [style*="background:rgba(0,0,0,0.04);border-radius:100px"]{border-radius:16px !important;padding:10px 16px !important;flex-direction:column !important;gap:8px !important;align-items:flex-start !important}
  [style*="background:rgba(0,0,0,0.04);border-radius:100px"] > [style*="opacity:0.3"]{display:none}

  /* Stats strip */
  .sstat{flex:1 1 100%;text-align:center;padding:28px 20px}
  .sstat-num{font-size:clamp(42px,10vw,64px)}

  /* Two Paths */
  .path-card-top{padding:32px 24px 28px}
  .path-features{padding:20px 24px 32px}
  .path-price{font-size:36px}
  .path-title{font-size:24px}

  /* Automator panel - hide on small screens, too complex */
  .win{display:none !important}
  [style*="grid-template-columns:1fr 1.3fr"] > div:first-child{max-width:100% !important}

  /* Service flow diagram */
  .service-diag{grid-template-columns:1fr !important}
  .step-pro{padding:32px 24px;border-right:none !important}

  /* Feature grid */
  .feature-cell{padding:32px 24px}
  .feature-cell h3{font-size:17px}

  /* Footer */
  [style*="grid-template-columns:1.6fr 1fr 1fr 1fr 1fr"]{grid-template-columns:1fr 1fr !important;gap:24px !important}
  [style*="font-size:clamp(60px,18vw,260px)"]{font-size:clamp(40px,14vw,120px) !important}

  /* Final CTA inner */
  [style*="background:#000000"][style*="border-radius:24px"]{padding:32px 24px !important;flex-direction:column !important;align-items:flex-start !important}

  /* Step rows */
  .steprow{flex-direction:column;gap:16px;padding:24px}
  .steprow .chip{align-self:flex-start}

  /* Pricing CTA section */
  [style*="background:var(--ink)"][style*="border-radius:var(--r-2xl)"]{padding:40px 28px !important}

  /* Comparison table */
  .cmp-row{font-size:12px;padding:14px 12px;gap:8px}

  /* Guarantee card */
  [style*="width:60px;height:60px"]{width:48px !important;height:48px !important}

  /* FAQ */
  .faq-q{font-size:17px;padding:20px 0}
  .faq-a{font-size:15px;padding-right:20px;padding-bottom:24px}

  /* Platform strip */
  [style*="gap:64px"][style*="opacity:0.4"]{gap:32px !important}
  [style*="gap:64px"][style*="opacity:0.4"] span{font-size:18px !important}
}

/* ---------- Responsive: Mobile (max-width: 480px) ---------- */
@media (max-width:480px){
  body{padding-top:50px}
  .topbar{height:50px}
  .brand{gap:6px;font-size:14px}
  .brand-mark{width:20px;height:20px}
  .navactions .btn-primary{font-size:11px !important;padding:5px 12px !important}
  .wrap,.wrap-tight{padding:0 16px}
  .sect{padding:56px 0}
  .sect-sm{padding:36px 0}
  .h-xl{font-size:36px}
  .h-lg{font-size:28px}
  .h-md{font-size:24px}
  .h-sm{font-size:20px}
  .body-lg{font-size:16px}
  .body{font-size:15px}
  .eyebrow{font-size:14px}
  .btn{font-size:13px;padding:10px 18px}
  .btn-lg{font-size:14px;padding:11px 20px}

  /* Hero */
  .sect:first-of-type{padding-top:40px !important;padding-bottom:48px !important}
  .sect:first-of-type h1{font-size:clamp(32px,8vw,44px) !important}
  .sect:first-of-type .body-lg{font-size:16px !important}
  .sect:first-of-type a.btn{font-size:16px !important;padding:12px 24px !important}
  .sect:first-of-type .ulink{font-size:16px !important}

  /* Cards */
  .card{padding:24px;border-radius:20px}

  /* Path cards */
  .path-card-top{padding:24px 20px 20px}
  .path-features{padding:16px 20px 24px}
  .path-price{font-size:32px}
  .path-title{font-size:22px}
  .path-body{font-size:14px}
  .path-actions{flex-direction:column;gap:10px}
  .path-actions .btn{width:100%;text-align:center}

  /* Feature cells */
  .feature-cell{padding:24px 20px}

  /* Footer */
  [style*="grid-template-columns:1.6fr 1fr 1fr 1fr 1fr"]{grid-template-columns:1fr !important;gap:20px !important}

  /* Final CTA */
  [style*="background:#000000"][style*="border-radius:24px"]{border-radius:20px !important;padding:28px 20px !important}
  [style*="background:#000000"][style*="border-radius:24px"] h2{font-size:28px !important}
  [style*="background:#000000"][style*="border-radius:24px"] .btn{width:100%;text-align:center}

  /* Day-one onboarding card */
  [style*="background:rgba(255,255,255,0.03)"][style*="border-radius:16px"]{padding:24px 20px !important}

  /* Pricing page CTA */
  [style*="background:var(--ink)"][style*="border-radius:var(--r-2xl)"]{padding:32px 20px !important;border-radius:24px !important}

  /* Service hero drive mock */
  .card-flat{padding:16px !important}

  /* Step rows */
  .steprow{padding:20px}

  /* Platform logos */
  [style*="gap:64px"][style*="opacity:0.4"]{gap:20px !important;flex-direction:column !important}

  /* Comparison table */
  .cmp-row{grid-template-columns:1.5fr 1fr 1fr;font-size:11px;padding:12px 10px}
}

/* ---------- Animations & Transitions ---------- */
.reveal-target {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-target.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* ---------- PrintMockup Plugin Replica ---------- */
.plugin-ui-mockup {
  background: #2A2A2A;
  color: #fff;
  border-radius: 16px;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.15);
  pointer-events: none; /* Disable all interaction */
}

.plugin-top-bar {
  background: rgba(255,255,255,0.03);
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0,0,0,0.4);
  font-size: 12px;
}

.plugin-tab {
  background: rgba(255,255,255,0.06);
  padding: 10px 20px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  border-right: 1px solid rgba(0,0,0,0.3);
  border-bottom: 1px solid transparent;
}

.plugin-top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  color: #888;
}

.plugin-header {
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.plugin-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.plugin-logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  flex-shrink: 0;
}

.logo-text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.version-text {
  font-size: 14px;
  color: rgba(255,255,255,0.4);
  font-weight: 500;
}

.plugin-icons {
  display: flex;
  gap: 8px;
}

.plugin-icon-btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.5);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  padding: 0;
}

.plugin-icon-btn svg {
  width: 18px;
  height: 18px;
}

/* Hover removed */

.plugin-icon-btn.active {
  background: rgba(0,102,204,0.15);
  color: #3399FF;
}

.plugin-section {
  background: rgba(0,0,0,0.2);
  margin: 0 24px 16px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.03);
}

.plugin-colors {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.color-box {
  aspect-ratio: 1.4;
  border-radius: 6px;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15), 0 4px 12px rgba(0,0,0,0.2);
}

.color-box .check-icon {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 14px;
  height: 14px;
  background: rgba(255,255,255,0.9);
  border-radius: 3px;
  display: grid;
  place-items: center;
  color: #000;
  font-size: 9px;
  font-weight: 800;
}

.color-box .copy-icon {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 14px;
  height: 14px;
  background: rgba(255,255,255,0.95);
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.copy-icon::before, .copy-icon::after {
  content: "";
  position: absolute;
  border: 1px solid #333;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 1px;
}
.copy-icon::before { top: 2px; left: 2px; }
.copy-icon::after { bottom: 2px; right: 2px; }

.plugin-toggles {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px 20px;
}

.btn-toggle {
  background: transparent;
  color: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  transition: background 0.2s;
}
.btn-toggle.solid {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}

.switch-group {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  margin-left: auto;
}

.switch {
  width: 34px;
  height: 20px;
  background: rgba(0,0,0,0.4);
  border-radius: 10px;
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.05);
}
.switch::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.plugin-inputs {
  padding: 0 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.input-row {
  background: rgba(0,0,0,0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 6px;
  padding: 4px 4px 4px 16px;
  border: 1px solid rgba(255,255,255,0.04);
}

.input-row .placeholder {
  color: rgba(255,255,255,0.4);
  font-size: 14px;
  letter-spacing: -0.01em;
}

.btn-input {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.05);
  padding: 8px 24px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
}

.plugin-footer-grid {
  display: grid;
  grid-template-columns: 1.9fr 1fr;
  gap: 16px;
  padding: 0 24px 24px;
}

.section-title {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  margin-bottom: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.resize-method {
  background: rgba(0,0,0,0.2);
  padding: 16px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.03);
}

.resize-options {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}

.resize-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
  padding: 8px 4px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.2s;
  flex: 1;
}

/* Hover removed */

.resize-opt.active {
  background: rgba(0,102,204,0.15);
  border-color: rgba(0,102,204,0.4);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.resize-thumb {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* The Bounds (Canvas) */
.resize-thumb::before {
  content: "";
  position: absolute;
  width: 28px;
  height: 34px;
  border: 1px dashed rgba(255,255,255,0.4);
  box-sizing: border-box;
  z-index: 2;
  transition: border-color 0.2s;
}

/* The Image (Design) */
.resize-thumb::after {
  content: "";
  position: absolute;
  background: #0077ED;
  border-radius: 1px;
  z-index: 1;
  transition: all 0.2s;
}

.resize-opt.active .resize-thumb::before {
  border-color: rgba(255,255,255,0.8);
}
.resize-opt.active .resize-thumb::after {
  background: #3399FF;
  box-shadow: 0 0 8px rgba(0,102,204,0.6);
}

/* Fit: Fits within 28x34. Becomes 28x28. */
.resize-thumb.fit::after {
  width: 28px;
  height: 28px;
}

/* Crop: Fills 28x34. Becomes 34x34 (overflows width). */
.resize-thumb.crop::after {
  width: 38px;
  height: 34px;
  opacity: 0.6;
}
.resize-opt.active .resize-thumb.crop::after {
  opacity: 0.8;
}

/* As Is: Original size, small. Becomes 16x16. */
.resize-thumb.asis::after {
  width: 16px;
  height: 16px;
}

/* Stretch: Exactly matches 28x34. */
.resize-thumb.stretch::after {
  width: 28px;
  height: 34px;
}

.align-method {
  background: rgba(0,0,0,0.2);
  padding: 16px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.align-method .section-title {
  text-align: center;
  width: 100%;
}

.align-grid {
  display: grid;
  grid-template-columns: repeat(3, 14px);
  grid-template-rows: repeat(3, 14px);
  gap: 6px;
}

.align-box {
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 2px;
  transition: all 0.2s;
}
.align-box.active {
  background: #0066CC;
  border-color: #0066CC;
  box-shadow: 0 0 8px rgba(0,102,204,0.4);
}

.btn-generate {
  width: calc(100% - 48px);
  margin: 0 24px 24px;
  background: linear-gradient(180deg, #0077ED 0%, #0066CC 100%);
  color: #fff;
  border: none;
  padding: 16px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,102,204,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform 0.2s, box-shadow 0.2s;
}
/* Hover removed */

/* ---------- Animated Workflow Showcase ---------- */
.workflow-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  /*max-width: 1080px;*/
  margin: 0 auto;
}
@media (max-width: 900px) {
  .workflow-grid {
    grid-template-columns: 1fr;
  }
}

.mac-window {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
}
.mac-window.dark {
  background: #1e1e1e;
  color: #fff;
  box-shadow: 0 30px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.1);
}
.mac-window.light {
  background: #fff;
  color: #000000;
}

.mac-topbar {
  height: 38px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: #F4F5F5;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.mac-window.dark .mac-topbar {
  background: #2d2d2d !important;
  border-bottom: 1px solid #111;
}

.mac-dots {
  display: flex;
  gap: 8px;
}
.mac-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}
.mac-dots span:nth-child(1) { background: #ff5f56; }
.mac-dots span:nth-child(2) { background: #ffbd2e; }
.mac-dots span:nth-child(3) { background: #27c93f; }

.mac-title {
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  margin-right: 56px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.mac-window.dark .mac-title { color: #aaa; }
.mac-window.light .mac-title { color: #555; }

/* Photoshop Layout */
.ps-body {
  display: flex;
  height: 560px;
  background: #232323;
}
.ps-canvas {
  flex: 1;
  background: #1a1a1a;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.canvas-img {
  position: absolute;
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
  opacity: 0;
  animation: canvas-cycle 12s step-end infinite;
  box-shadow: 0 15px 35px rgba(0,0,0,0.6);
}
.canvas-img.img-1 { animation-delay: 0s; }
.canvas-img.img-2 { animation-delay: 3s; }
.canvas-img.img-3 { animation-delay: 6s; }
.canvas-img.img-4 { animation-delay: 9s; }

@keyframes canvas-cycle {
  0% { opacity: 1; z-index: 2; }
  2.08333% { opacity: 0; z-index: 1; }
  100% { opacity: 0; z-index: 1; }
}

.workflow-grid .canvas-img,
.workflow-grid .batch-group,
.workflow-grid .grid-thumb {
  animation-play-state: paused;
}
.workflow-grid.is-revealed .canvas-img,
.workflow-grid.is-revealed .batch-group,
.workflow-grid.is-revealed .grid-thumb {
  animation-play-state: running;
}




.ps-toolbar {
  width: 38px;
  background: #2D2D2D;
  border-right: 1px solid #111;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  gap: 14px;
  color: #aaa;
}
.ps-toolbar svg { opacity: 0.5; transition: opacity 0.2s; }
.ps-toolbar svg.active { opacity: 1; color: #0066CC; }

.ps-layers {
  width: 180px;
  background: #2D2D2D;
  border-left: 1px solid #111;
  display: flex;
  flex-direction: column;
}
.ps-layers-header {
  padding: 8px 12px;
  background: #383838;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #888;
  border-bottom: 1px solid #111;
}
.ps-layers-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.ps-layer-item {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  gap: 8px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  cursor: default;
}
.ps-layer-item.active {
  background: #444;
}
.ps-layer-eye {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}
.ps-layer-thumb {
  width: 24px;
  height: 24px;
  background: #3a3a3a;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.ps-layer-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ps-layer-thumb.smart-object::after {
  content: "";
  position: absolute;
  bottom: 0; right: 0;
  width: 8px; height: 8px;
  background: rgba(255,255,255,0.2);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0);
}
.ps-layer-name {
  font-size: 11px;
  color: #ccc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ps-layer-item.folder .ps-layer-name { color: #888; font-weight: 600; }

.color-picker { width: 22px; height: 22px; position: relative; margin-top: auto; margin-bottom: 12px; }
.cp-front { width: 14px; height: 14px; background: #fff; position: absolute; top: 0; left: 0; border: 1px solid #000; z-index: 2; border-radius: 2px; }
.cp-back { width: 14px; height: 14px; background: #000; position: absolute; bottom: 0; right: 0; border: 1px solid #fff; z-index: 1; border-radius: 2px; }


/* Finder Layout */
.finder-body {
  display: flex;
  height: 560px;
  background: #fff;
}
.finder-sidebar {
  width: 130px;
  background: rgba(0,0,0,0.03);
  border-right: 1px solid rgba(0,0,0,0.08);
  padding: 12px 0;
}
.sidebar-item {
  display: block;
  padding: 8px 16px;
  font-size: 12px;
  color: #000000;
  cursor: default;
  font-weight: 500;
  line-height: 1.2;
}
.sidebar-item.active {
  background: #0066CC;
  color: #fff;
  margin: 0 8px;
  border-radius: 6px;
  padding: 8px 10px;
}
.finder-grid-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #f4f5f7;
}
.batch-group {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-content: flex-start;
  opacity: 0;
  pointer-events: none;
  animation: batch-show 12s step-end infinite;
}
@keyframes batch-show {
  0% { opacity: 1; pointer-events: auto; }
  25%, 100% { opacity: 0; pointer-events: none; }
}
.batch-1 { animation-delay: 0s; }
.batch-2 { animation-delay: 3s; }
.batch-3 { animation-delay: 6s; }
.batch-4 { animation-delay: 9s; }

.grid-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  animation: thumb-pop 12s infinite;
}
.thumb-img {
  width: 100%;
  aspect-ratio: 1;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}
.thumb-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.grid-thumb span { font-size: 10px; color: #333; text-align: center; font-weight: 500; }

@keyframes thumb-pop {
  0%, 1% { opacity: 0; transform: scale(0.9); }
  2%, 24% { opacity: 1; transform: scale(1); }
  25%, 100% { opacity: 0; }
}

.t-1 { animation-delay: 0s; }
.t-2 { animation-delay: 0.25s; }
.t-3 { animation-delay: 0.5s; }
.t-4 { animation-delay: 0.75s; }
.t-5 { animation-delay: 1.0s; }
.t-6 { animation-delay: 1.25s; }
.t-7 { animation-delay: 1.5s; }
.t-8 { animation-delay: 1.75s; }
.t-9 { animation-delay: 2.0s; }
.t-10 { animation-delay: 2.25s; }
.t-11 { animation-delay: 2.5s; }
.t-12 { animation-delay: 2.75s; }

.t-13 { animation-delay: 3.0s; }
.t-14 { animation-delay: 3.25s; }
.t-15 { animation-delay: 3.5s; }
.t-16 { animation-delay: 3.75s; }
.t-17 { animation-delay: 4.0s; }
.t-18 { animation-delay: 4.25s; }
.t-19 { animation-delay: 4.5s; }
.t-20 { animation-delay: 4.75s; }
.t-21 { animation-delay: 5.0s; }
.t-22 { animation-delay: 5.25s; }
.t-23 { animation-delay: 5.5s; }
.t-24 { animation-delay: 5.75s; }

.t-25 { animation-delay: 6.0s; }
.t-26 { animation-delay: 6.25s; }
.t-27 { animation-delay: 6.5s; }
.t-28 { animation-delay: 6.75s; }
.t-29 { animation-delay: 7.0s; }
.t-30 { animation-delay: 7.25s; }
.t-31 { animation-delay: 7.5s; }
.t-32 { animation-delay: 7.75s; }
.t-33 { animation-delay: 8.0s; }
.t-34 { animation-delay: 8.25s; }
.t-35 { animation-delay: 8.5s; }
.t-36 { animation-delay: 8.75s; }

.t-37 { animation-delay: 9.0s; }
.t-38 { animation-delay: 9.25s; }
.t-39 { animation-delay: 9.5s; }
.t-40 { animation-delay: 9.75s; }
.t-41 { animation-delay: 10.0s; }
.t-42 { animation-delay: 10.25s; }
.t-43 { animation-delay: 10.5s; }
.t-44 { animation-delay: 10.75s; }
.t-45 { animation-delay: 11.0s; }
.t-46 { animation-delay: 11.25s; }
.t-47 { animation-delay: 11.5s; }
.t-48 { animation-delay: 11.75s; }

/* Go to Top */
#go-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #000000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s, background 0.2s;
}
#go-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#go-top:hover {
  background: #000000;
  color: #fff;
  border-color: #000000;
}

/* Footer Socials */
.footer-socials {
  display: flex;
  align-items: center;
  gap: 16px;
}
.footer-socials a {
  color: var(--ink-4, #86868B);
  transition: color 0.2s, transform 0.2s;
  display: flex;
}
.footer-socials a:hover {
  color: var(--ink, #000000);
  transform: translateY(-2px);
}

/* ---------- Hero Glass Background System ---------- */
.hero-glass-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-section .wrap {
  position: relative;
  z-index: 1;
}

.glass-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.5;
  will-change: transform;
}

.blob-1 {
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(0, 122, 255, 0.1) 0%, transparent 70%);
  top: -300px;
  left: -200px;
  animation: hero-blob-float 25s ease-in-out infinite alternate;
}

.blob-2 {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(52, 199, 89, 0.08) 0%, transparent 70%);
  bottom: -200px;
  right: -100px;
  animation: hero-blob-float 20s ease-in-out infinite alternate-reverse;
}

.blob-3 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 45, 85, 0.04) 0%, transparent 70%);
  top: 20%;
  right: 15%;
  animation: hero-blob-float 30s ease-in-out infinite;
}

@keyframes hero-blob-float {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  50% { transform: translate(100px, 80px) scale(1.1) rotate(5deg); }
  100% { transform: translate(-50px, -100px) scale(0.9) rotate(-5deg); }
}

/* ---------- Blog ---------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 32px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  border: 1px solid rgba(0,0,0,0.04);
  height: 100%;
  text-decoration: none;
}

.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.blog-card-img {
  width: 100%;
  aspect-ratio: 16/10;
  background: var(--surface-2);
  object-fit: cover;
}

.blog-card-content {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card-meta {
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.blog-card-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.blog-card-excerpt {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-footer {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}

/* Article Page */
.article-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

.article-header {
  text-align: center;
  margin-bottom: 64px;
}

.article-content {
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink-2);
  letter-spacing: -0.012em;
}

.article-content h2 {
  font-size: 32px;
  font-weight: 700;
  margin: 64px 0 24px;
  color: var(--ink);
  letter-spacing: -0.03em;
}

.article-content p {
  margin-bottom: 28px;
}

.article-content img {
  width: 100%;
  border-radius: 24px;
  margin: 48px 0;
}

/* ---------- Editorial / Blog Detail ---------- */
.article-dropcap::first-letter {
  font-family: var(--font-display);
  font-size: 4.8em;
  font-weight: 700;
  float: left;
  line-height: 0.8;
  margin: 0.1em 0.1em 0.1em 0;
  color: var(--ink);
}

.article-pullquote {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.04em;
  text-align: center;
  margin: 96px auto;
  max-width: 1000px;
  position: relative;
  padding: 0 40px;
}

.article-pullquote::before {
  content: "“";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 120px;
  color: var(--accent);
  opacity: 0.1;
  font-family: var(--font-display);
}

.article-section-divider {
  width: 80px;
  height: 1px;
  background: var(--line);
  margin: 80px auto;
}

.article-metadata-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 32px;
  margin-top: 64px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-3);
}

.article-author-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-2);
  object-fit: cover;
}

/* ---------- Professional Editorial Extras ---------- */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(0,0,0,0.05);
  z-index: 2000;
}

.progress-bar {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width 0.1s ease;
}

.article-caption {
  display: block;
  text-align: center;
  font-size: 13px;
  color: var(--ink-4);
  margin-top: 16px;
  letter-spacing: 0.02em;
  font-style: italic;
}

.newsletter-card {
  background: #000000;
  color: #fff;
  border-radius: 32px;
  padding: 64px 48px;
  text-align: center;
  margin-top: 96px;
  position: relative;
  overflow: hidden;
}

.newsletter-card h3 {
  color: #fff;
  font-size: 32px;
  margin-bottom: 16px;
}

.newsletter-card p {
  color: rgba(255,255,255,0.6);
  max-width: 440px;
  margin: 0 auto 32px;
}

.newsletter-form {
  display: flex;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
}

.newsletter-input {
  flex: 1;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 14px 20px;
  color: #fff;
  font-size: 16px;
}

.newsletter-input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255,255,255,0.12);
}

/* ---------- Apple Newsroom Style ---------- */
.article-subnav {
  position: sticky;
  top: 60px; /* Below main nav */
  width: 100%;
  background: rgba(255,255,255,0.8);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  z-index: 100;
  padding: 12px 0;
}

.article-subnav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.article-subnav-brand {
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
}

.article-title-huge {
  font-size: clamp(60px, 9vw, 110px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.06em;
  color: var(--ink);
  text-align: center;
  margin-bottom: 48px;
}

.article-intro-text {
  font-size: 26px;
  line-height: 1.35;
  color: var(--ink-2);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 64px;
}

.article-body-text {
  font-size: 20px;
  line-height: 1.6;
  color: #000000;
  letter-spacing: -0.01em;
}

.article-body-text p {
  margin-bottom: 32px;
}

.article-body-text h2 {
  font-size: 40px;
  font-weight: 700;
  margin: 80px 0 32px;
  letter-spacing: -0.04em;
}

.article-figure-contained {
  max-width: 1100px;
  margin: 64px auto;
  padding: 0 24px;
}

.article-figure-contained img {
  width: 100%;
  height: auto;
  border-radius: 24px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.1);
  display: block;
}

.article-footer-meta {
  padding-top: 80px;
  margin-top: 120px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.meta-item label {
  display: block;
  font-size: 13px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  font-weight: 600;
}

.meta-item span {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-2);
}

/* ---------- Professional FAQ Redesign ---------- */
.faq-container {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 80px;
  align-items: start;
}

.faq-sidebar {
  position: sticky;
  top: 120px;
}

.faq-nav-link {
  display: block;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease;
}

.faq-nav-link:hover, .faq-nav-link.active {
  color: var(--ink);
  padding-left: 8px;
}

.faq-nav-link.active {
  font-weight: 700;
  border-bottom-color: var(--accent);
}

.faq-search-wrap {
  position: relative;
  max-width: 600px;
  margin: 48px auto 0;
}

.faq-search-input {
  width: 100%;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 18px 24px 18px 56px;
  font-size: 18px;
  color: var(--ink);
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
  transition: all 0.3s ease;
}

.faq-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}

.faq-search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-4);
}

@media (max-width: 980px) {
  .faq-container {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .faq-sidebar {
    position: static;
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }
  .faq-nav-link {
    white-space: nowrap;
    border-bottom: none;
  }
}

/* ---------- FAQ / Support Redesign ---------- */
.glass-search-wrap {
  position: relative;
  max-width: 600px;
  margin: 48px auto 0;
  z-index: 10;
}

.glass-search {
  width: 100%;
  background: rgba(255,255,255,0.7);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 980px;
  padding: 18px 24px 18px 56px;
  font-size: 17px;
  color: var(--ink);
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
  transition: all 0.3s ease;
}

.glass-search:focus {
  outline: none;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  border-color: var(--accent);
}

.search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-4);
  pointer-events: none;
}

.faq-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 80px;
}

.category-card {
  background: #fff;
  border-radius: 24px;
  padding: 32px;
  text-align: center;
  border: 1px solid rgba(0,0,0,0.04);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  text-decoration: none;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.06);
  border-color: var(--accent-soft);
}

.category-icon {
  width: 48px;
  height: 48px;
  background: var(--surface-2);
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  color: var(--accent);
}

.category-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}

.category-card p {
  font-size: 14px;
  color: var(--ink-3);
  margin: 0;
}

/* Redefined FAQ Items */
.faq-group {
  margin-bottom: 96px;
}

.faq-group-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 32px;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.faq-item-modern {
  background: #fff;
  border-radius: 16px;
  margin-bottom: 12px;
  border: 1px solid rgba(0,0,0,0.03);
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.faq-item-modern:hover {
  border-color: rgba(0,0,0,0.1);
}

.faq-q-modern {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}

.faq-a-modern {
  padding: 0 28px 24px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.5;
  display: none;
}

.faq-item-modern.open .faq-a-modern {
  display: block;
}

.faq-item-modern.open .faq-toggle {
  transform: rotate(45deg);
}

/* ---------- FAQ Professional Refinement ---------- */
.category-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #F5F5F7 100%);
}

.category-card::after {
  content: "";
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 100px;
  height: 100px;
  background: var(--accent);
  opacity: 0.03;
  border-radius: 50%;
  transition: all 0.6s ease;
}

.category-card:hover::after {
  transform: scale(2);
  opacity: 0.06;
}

.faq-q-modern::before {
  content: "?";
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--surface-2);
  color: var(--accent);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  margin-right: 16px;
  flex-shrink: 0;
}

.faq-group-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.faq-group-header span {
  width: 40px;
  height: 2px;
  background: var(--accent);
  opacity: 0.3;
}

.support-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,0.03);
  padding: 8px 20px;
  border-radius: 980px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 24px;
}

/* ---------- FAQ Ultra-Clean Refinement ---------- */
.faq-minimal {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item-clean {
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: 8px 0;
}

.faq-q-clean {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #000000;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}

.faq-q-clean:hover {
  color: var(--accent);
}

.faq-a-clean {
  padding-bottom: 32px;
  color: #515154;
  font-size: 17px;
  line-height: 1.6;
  max-width: 65ch;
  display: none;
}

.faq-item-clean.open .faq-a-clean {
  display: block;
}

.faq-item-clean.open .faq-chevron {
  transform: rotate(180deg);
}

.faq-chevron {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--ink-4);
}

/* ---------- FAQ Ultimate Apple Polish ---------- */
.faq-hero-gradient {
  background: radial-gradient(circle at top right, rgba(0,102,204,0.05), transparent 40%),
              radial-gradient(circle at bottom left, rgba(0,102,204,0.03), transparent 40%);
}

.popular-topics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 800px;
  margin: 48px auto 0;
}

.topic-pill {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.topic-pill:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 20px rgba(0,0,0,0.04);
  transform: translateY(-2px);
}

.topic-icon {
  width: 32px;
  height: 32px;
  color: var(--accent);
}

.topic-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.faq-section-card {
  background: #fff;
  border-radius: 28px;
  padding: 48px;
  margin-bottom: 32px;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}

.faq-q-clean {
  font-size: 19px;
  font-weight: 600;
}

/* ---------- Liquid Glass Mockup (Finder Style) ---------- */
.mockup-window {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: saturate(180%) blur(40px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  font-family: var(--font-display);
}

.mockup-header {
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 12px;
}

.window-dots {
  display: flex;
  gap: 6px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.dot.red { background: #FF5F57; }
.dot.yellow { background: #FFBD2E; }
.dot.green { background: #28C840; }

.mockup-path {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: 0.02em;
}

.mockup-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.file-item-glass {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.3s ease;
}

.file-item-glass:hover {
  transform: translateX(4px);
}

.file-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

.file-info h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}

.file-info p {
  font-size: 12px;
  color: var(--ink-4);
}

.delivery-success {
  background: linear-gradient(135deg, rgba(40, 200, 64, 0.1), rgba(40, 200, 64, 0.05));
  border-color: rgba(40, 200, 64, 0.2);
}

/* ---------- Services Professional Refinement ---------- */
.sidebar-mock {
  width: 140px;
  background: rgba(0,0,0,0.02);
  border-right: 1px solid rgba(0,0,0,0.04);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-mock-item {
  height: 8px;
  border-radius: 4px;
  background: rgba(0,0,0,0.05);
  width: 100%;
}

.sidebar-mock-item.active {
  background: var(--accent);
  opacity: 0.2;
}

.pricing-grid-premium {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 64px;
}

.premium-tier {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 24px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-tier:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.08);
}

.premium-tier.featured {
  background: #000000;
  color: #fff;
}

.premium-tier.featured .body-sm,
.premium-tier.featured .mono {
  color: rgba(255,255,255,0.6);
}

.premium-tier.featured .btn-line {
  border-color: rgba(255,255,255,0.2);
  color: #fff;
}

.service-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-3);
  margin-top: 12px;
}

.service-stat span {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
}
/* ---------- Attractive Pricing Cards ---------- */
.pcard {
  background: var(--bg);
  border-radius: 32px;
  padding: 40px;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  height: 100%;
}
.pcard:hover {
  transform: translateY(-8px);
  border-color: var(--accent-soft);
  box-shadow: 0 30px 60px rgba(0,0,0,0.05);
}
.pcard-pop {
  border-color: var(--accent-soft);
  box-shadow: 0 20px 40px rgba(0,102,204,0.05);
}
.pcard-pop::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 32px;
  padding: 1px;
  background: linear-gradient(180deg, var(--accent), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.pcard-gold {
  background: linear-gradient(180deg, #fff, #FFF9F0);
  border-color: rgba(212, 175, 55, 0.2);
}
.pcard-gold:hover {
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow: 0 30px 60px rgba(212, 175, 55, 0.1);
}
.pcard-dark {
  background: #000000;
  border-color: rgba(255,255,255,0.08);
  color: #fff;
}
.pcard-dark:hover {
  background: #252528;
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 40px 80px rgba(0,0,0,0.3);
}
.pcard-dark h3, .pcard-dark .p-val { color: #fff; }
.pcard-dark .p-feat { color: rgba(255,255,255,0.6); }

.p-val {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.04em;
  margin: 12px 0 4px;
}
.p-unit {
  font-size: 16px;
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: 0;
}
.p-feat {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  color: var(--ink-2);
  margin-bottom: 12px;
}
.p-feat svg {
  width: 18px;
  height: 18px;
  color: var(--success);
  flex-shrink: 0;
}
.pcard-dark .p-feat svg { color: #34C759; }

/* ---------- Ultra-Luxury Studio Console Workflow Section ---------- */
.service-luxury-section {
  background: #030712 !important;
  color: #FFFFFF !important;
  padding: 120px 0 !important;
  position: relative;
  overflow: hidden;
  background-image: 
    radial-gradient(circle at 75% 30%, rgba(99, 102, 241, 0.16) 0%, rgba(14, 165, 233, 0.08) 45%, transparent 75%),
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 100% 100%, 36px 36px, 36px 36px;
}

.studio-split-container {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap: 56px;
  align-items: center;
}

@media (max-width: 1024px) {
  .studio-split-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.studio-accordion-step {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 20px 24px;
  margin-bottom: 16px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  cursor: pointer;
}

.studio-accordion-step:hover, .studio-accordion-step.active-step {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(56, 189, 248, 0.5);
  transform: translateX(6px);
  box-shadow: 0 10px 30px rgba(14, 165, 233, 0.15);
}

.studio-accordion-step.active-step::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 4px;
  background: linear-gradient(180deg, #38BDF8, #818CF8);
  border-radius: 0 4px 4px 0;
}

.studio-console-window {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(99, 102, 241, 0.15);
  overflow: hidden;
  backdrop-filter: blur(20px);
}

.studio-console-header {
  background: rgba(6, 11, 25, 0.9);
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.studio-console-body {
  padding: 24px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  font-family: var(--mono);
  font-size: 12px;
}

@media (max-width: 640px) {
  .studio-console-body {
    grid-template-columns: 1fr;
  }
}

.studio-tree-sidebar {
  background: rgba(3, 7, 18, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 14px;
}

.studio-tree-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11.5px;
  margin-bottom: 4px;
}

.studio-tree-item.active {
  background: rgba(56, 189, 248, 0.15);
  color: #38BDF8;
  font-weight: 700;
}

/* ============ NEW FEATURE COMPARISON HUB ============ */
.matrix-container {
  margin-top: 64px;
  background: linear-gradient(180deg, #F8F9FB 0%, #FFFFFF 100%);
  border-radius: 32px;
  padding: 56px 40px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.04);
}

.matrix-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 992px) {
  .matrix-grid {
    grid-template-columns: 1fr;
  }
}

.matrix-col {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.matrix-col:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}

.matrix-col-featured {
  background: linear-gradient(180deg, #091122 0%, #000000 100%);
  color: #ffffff;
  border-color: rgba(56, 189, 248, 0.3);
  box-shadow: 0 20px 50px rgba(0, 102, 204, 0.2);
}

.matrix-feature-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.matrix-col-featured .matrix-feature-item {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.matrix-feature-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  font-family: var(--mono);
}

.matrix-col-featured .matrix-feature-label {
  color: #38BDF8;
}

.matrix-feature-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.matrix-col-featured .matrix-feature-val {
  color: #ffffff;
}

/* ============ FRESH WORKFLOW SECTION ("Drop a folder. Get back a store.") ============ */
.fresh-folder-section {
  padding: 110px 0;
  background-color: #080C14;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.fresh-folder-section::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 102, 204, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

/* Single Partition Box for 4 Steps */
.fresh-single-partition-box {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.04);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  margin-top: 52px;
}

.fresh-partition-step {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  transition: background 0.25s ease;
}

.fresh-partition-step:last-child {
  border-right: none;
}

.fresh-partition-step:hover {
  background: rgba(0, 102, 204, 0.02);
}

@media (max-width: 992px) {
  .fresh-single-partition-box {
    grid-template-columns: 1fr 1fr;
  }
  .fresh-partition-step:nth-child(2) {
    border-right: none;
  }
  .fresh-partition-step:nth-child(1),
  .fresh-partition-step:nth-child(2) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
}

@media (max-width: 640px) {
  .fresh-single-partition-box {
    grid-template-columns: 1fr;
  }
  .fresh-partition-step {
    border-right: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
  .fresh-partition-step:last-child {
    border-bottom: none;
  }
}

/* ============ INTERACTIVE MANAGED STUDIO SHOWCASE ============ */
.fresh-studio-experience {
  padding: 100px 0;
  background: var(--surface-1);
  position: relative;
}

.studio-interactive-split {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 36px;
  align-items: stretch;
}

@media (max-width: 1024px) {
  .studio-interactive-split {
    grid-template-columns: 1fr;
  }
}

.studio-step-accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.interactive-step-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.interactive-step-card:hover {
  border-color: rgba(0, 102, 204, 0.3);
  transform: translateX(4px);
}

.interactive-step-card.active {
  border-color: #0066CC;
  background: #ffffff;
  box-shadow: 0 12px 36px rgba(0, 102, 204, 0.12);
  position: relative;
}

.interactive-step-card.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 4px;
  background: #0066CC;
  border-radius: 0 4px 4px 0;
}

.step-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.step-pill {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  color: #0066CC;
  background: rgba(0, 102, 204, 0.08);
  padding: 4px 10px;
  border-radius: 6px;
}

.step-badge {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--mono);
  padding: 3px 8px;
  border-radius: 6px;
}

.step-badge.green {
  color: #1A8245;
  background: rgba(26, 130, 69, 0.1);
}

.step-badge.blue {
  color: #0066CC;
  background: rgba(0, 102, 204, 0.1);
}

.step-badge.purple {
  color: #6366F1;
  background: rgba(99, 102, 241, 0.1);
}

.step-card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}

.step-card-desc {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
}

.studio-stage-window {
  background: #090D16;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  min-height: 480px;
}

.stage-window-topbar {
  background: rgba(3, 7, 18, 0.9);
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stage-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stage-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.stage-dots span:nth-child(1) { background: #FF5F56; }
.stage-dots span:nth-child(2) { background: #FFBD2E; }
.stage-dots span:nth-child(3) { background: #27C93F; }

.stage-window-title {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.stage-live-tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: #34C759;
  background: rgba(52, 199, 89, 0.15);
  padding: 3px 8px;
  border-radius: 4px;
}

.stage-content-area {
  padding: 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #ffffff;
}

/* Time Saved Calculator Box */
.time-saved-widget-box {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 28px 36px;
  display: grid;
  grid-template-columns: 1.2fr 1.5fr 1fr;
  gap: 32px;
  align-items: center;
}

/* ============ BOLD 3-CARD MASTERCLASS MANAGED SERVICE SECTION ============ */
@keyframes floatGlow1 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(70px, 50px) scale(1.15); }
  100% { transform: translate(-30px, 20px) scale(0.95); }
}
@keyframes floatGlow2 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-80px, -60px) scale(1.18); }
  100% { transform: translate(40px, -20px) scale(0.92); }
}
@keyframes floatGlow3 {
  0% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-42%, -58%) scale(1.12); }
  100% { transform: translate(-58%, -42%) scale(0.96); }
}

.master-service-section {
  padding: 120px 0;
  background: #080A14;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.master-service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 52px;
}

@media (max-width: 992px) {
  .master-service-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.master-service-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 28px;
  padding: 40px 34px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.master-service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 102, 204, 0.3);
  box-shadow: 0 24px 50px rgba(0, 102, 204, 0.08);
}

.master-card-num {
  font-family: var(--mono);
  font-size: 36px;
  font-weight: 800;
  color: #0066CC;
  line-height: 1;
  margin-bottom: 20px;
  opacity: 0.9;
}

.master-card-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.master-card-desc {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0 0 28px;
}

.master-card-footer {
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #1A8245;
}

.master-cta-box {
  margin-top: 48px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 36px 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.03);
}

@media (max-width: 768px) {
  .master-cta-box {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
}

/* ============ DOWNLOAD LICENSE & PLUGIN MODAL ============ */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: modalFadeIn 0.25s ease-out forwards;
}

.modal-overlay.active {
  display: flex !important;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.modal-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 28px;
  padding: 40px 36px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
  position: relative;
  text-align: center;
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 20px;
  color: var(--ink-2);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--ink);
}

.modal-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.modal-desc {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 24px;
}

.modal-input {
  width: 100%;
  background: #F5F5F7;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 14px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.modal-input:focus {
  border-color: #0066CC;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
}

.modal-btn {
  width: 100%;
  background: #0066CC;
  color: #ffffff;
  border: none;
  border-radius: 980px;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 102, 204, 0.3);
}

.modal-btn:hover {
  background: #0055B3;
  transform: translateY(-1px);
}

.license-box {
  background: rgba(0, 102, 204, 0.06);
  border: 1px dashed rgba(0, 102, 204, 0.3);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.license-box span {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 800;
  color: #0066CC;
  letter-spacing: 0.05em;
}

.license-copy {
  background: #0066CC;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* ==========================================================================
   WHAT WE SOLVE PAGE (solve.php) STYLES — FULL VISUAL & ANIMATED STACKS
   ========================================================================== */

.solve-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Time Comparison Dashboard */
.compare-dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin: 48px 0 96px;
}

@media (max-width: 800px) {
  .compare-dashboard {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.compare-card {
  background: #F5F5F7;
  border-radius: 28px;
  padding: 48px;
  border: 1px solid rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.compare-card.brand-gradient {
  background: linear-gradient(135deg, #0A0A0C 0%, #18181A 100%);
  border-color: rgba(255,255,255,0.08);
  color: #FFFFFF;
}

/* Clocks & Timers */
.clock-widget {
  width: 90px;
  height: 90px;
  border: 4px solid #1D1D1F;
  border-radius: 50%;
  position: relative;
  margin-bottom: 24px;
  background: #ffffff;
}

.compare-card.brand-gradient .clock-widget {
  border-color: #0066CC;
  background: #0A0A0C;
}

.clock-hand-hour {
  width: 4px;
  height: 28px;
  background: #1D1D1F;
  position: absolute;
  top: 14px;
  left: 39px;
  transform-origin: bottom center;
  animation: rotateHand 8s infinite linear;
}

.clock-hand-minute {
  width: 2.5px;
  height: 38px;
  background: #86868B;
  position: absolute;
  top: 4px;
  left: 40px;
  transform-origin: bottom center;
  animation: rotateHand 1s infinite linear;
}

.compare-card.brand-gradient .clock-hand-hour {
  background: #FFFFFF;
  animation: rotateHandFast 2.5s infinite linear;
}

.compare-card.brand-gradient .clock-hand-minute {
  background: #0066CC;
  animation: rotateHandFast 0.4s infinite linear;
}

.clock-center {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0066CC;
  position: absolute;
  top: 37px;
  left: 37px;
}

/* Digital clock display */
.digital-timer {
  font-family: var(--mono);
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

/* Manual progress bar (crawling) */
.progress-container {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  overflow: hidden;
  margin: 20px 0;
}

.compare-card.brand-gradient .progress-container {
  background: rgba(255, 255, 255, 0.12);
}

.progress-bar-slow {
  height: 100%;
  width: 0%;
  background: #FF453A;
  border-radius: 3px;
  animation: loadSlow 8s infinite ease-out;
}

.progress-bar-fast {
  height: 100%;
  width: 0%;
  background: #34C759;
  border-radius: 3px;
  animation: loadFast 2.5s infinite cubic-bezier(0.16, 1, 0.3, 1);
}

/* Keyframes comparison */
@keyframes rotateHand {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes rotateHandFast {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes loadSlow {
  0% { width: 0%; }
  25% { width: 12%; }
  50% { width: 28%; }
  75% { width: 44%; }
  100% { width: 50%; }
}

@keyframes loadFast {
  0% { width: 0%; }
  80% { width: 100%; }
  100% { width: 100%; }
}

/* Visual Mockup pipeline widgets */
.solve-pipeline-box {
  background: #F5F5F7;
  border-radius: 20px;
  width: 100%;
  padding: 32px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  overflow: hidden;
}

.compare-card.brand-gradient .solve-pipeline-box {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Interactive Bento Blocks for Path 1 & Path 2 */
.path-simulator-frame {
  background: #F5F5F7;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.06);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.dark-theme .path-simulator-frame {
  background: #0A0A0C;
  border-color: rgba(255, 255, 255, 0.08);
}

/* Interactive Photoshop mockup frame */
.ps-window-mockup {
  width: 100%;
  height: 240px;
  background: #2B2B2B;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 16px 40px rgba(0,0,0,0.25);
  overflow: hidden;
  position: relative;
  display: flex;
  color: #DCDCDC;
  font-family: var(--mono);
}

.ps-mock-sidebar {
  width: 90px;
  background: #202020;
  border-right: 1px solid #181818;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ps-mock-button {
  background: #0066CC;
  border: none;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 6px 4px;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
}

.ps-mock-button:hover {
  background: #004EA8;
}

.ps-mock-canvas-area {
  flex: 1;
  background: #1E1E1E;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 16px;
}

.ps-mock-canvas-shirt {
  width: 110px;
  height: 110px;
  background: #ffffff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ps-mock-artwork-card {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  border: 2.5px solid #0066CC;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  opacity: 0;
}

.ps-mock-artwork-card.animating {
  animation: psArtMap 2.2s infinite cubic-bezier(0.16, 1, 0.3, 1);
}

.ps-mock-indicator {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(52, 199, 89, 0.15);
  color: #34C759;
  border: 1px solid #34C759;
  font-size: 8.5px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0;
}

.ps-mock-indicator.animating {
  animation: psStatusFade 2.2s infinite ease-in-out;
}

/* Keyframes for Photoshop Sim */
@keyframes psArtMap {
  0% {
    transform: translate(-100px, 60px) scale(0.5);
    opacity: 0;
  }
  20% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
    border-color: #0066CC;
  }
  30%, 75% {
    transform: translate(0, 0) scale(0.85);
    opacity: 1;
    border-color: transparent;
    background: transparent;
  }
  85% {
    transform: translate(100px, -60px) scale(0.5);
    opacity: 0;
  }
  100% {
    transform: translate(100px, -60px) scale(0.5);
    opacity: 0;
  }
}

@keyframes psStatusFade {
  0%, 30% { opacity: 0; transform: scale(0.9); }
  35%, 75% { opacity: 1; transform: scale(1); }
  80%, 100% { opacity: 0; transform: scale(0.9); }
}

/* Service File Upload Stream Sim */
.service-stream-sim {
  width: 100%;
  height: 240px;
  background: #111215;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 24px;
}

.service-stream-source-box {
  width: 80px;
  height: 80px;
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: rgba(255, 255, 255, 0.6);
  position: relative;
}

.service-stream-file {
  position: absolute;
  width: 24px;
  height: 30px;
  background: #ffffff;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  color: #111215;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  opacity: 0;
  animation: fileFlow 3s infinite linear;
}

.service-stream-cloud {
  font-size: 52px;
  position: relative;
  z-index: 2;
  animation: cloudPulse 2s infinite ease-in-out;
}

.service-stream-output {
  width: 80px;
  height: 80px;
  border: 2px solid #34C759;
  background: rgba(52, 199, 89, 0.1);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  position: relative;
  color: #34C759;
}

/* Keyframes for Service Stream */
@keyframes fileFlow {
  0% {
    transform: translate(-100px, 0) scale(0.6);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  45% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  55% {
    opacity: 0.5;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translate(100px, 0) scale(0.6);
    opacity: 0;
  }
}

@keyframes cloudPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(0,102,204,0)); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 16px rgba(0,102,204,0.4)); }
}


/* Timeline & Comparison Tabs */
.solve-tab-wrapper {
  background: #F5F5F7;
  border-radius: 16px;
  padding: 8px;
  display: inline-flex;
  gap: 4px;
  margin: 24px 0 40px;
}

.solve-tab-btn {
  background: none;
  border: none;
  border-radius: 10px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  color: #86868B;
  transition: all 0.25s ease;
}

.solve-tab-btn.active {
  background: #FFFFFF;
  color: #000000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.solve-tab-wrapper.dark-theme {
  background: rgba(255, 255, 255, 0.08);
}

.solve-tab-wrapper.dark-theme .solve-tab-btn.active {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  box-shadow: none;
}

/* Animations Content Blocks */
.solve-anim-viewport {
  background: #F5F5F7;
  border-radius: 18px;
  height: 280px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}

.solve-panel-card.dark-theme .solve-anim-viewport {
  background: #0A0A0C;
  border-color: rgba(255, 255, 255, 0.08);
}

/* Loop Animation 1: Plugin bulk map */
.plugin-sim-canvas {
  width: 140px;
  height: 140px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.plugin-sim-tshirt {
  width: 90px;
  height: 90px;
  opacity: 0.95;
}

.plugin-sim-artwork {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 2px solid #0066CC;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0,102,204,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  animation: artSlideIn 4s infinite cubic-bezier(0.25, 1, 0.5, 1);
}

.plugin-sim-status {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(40, 205, 65, 0.15);
  color: #28CD41;
  padding: 4px 8px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  animation: statusFade 4s infinite ease-in-out;
}

/* Loop Animation 2: Service cloud batch */
.service-sim-source {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 2;
  animation: floatLight 3s infinite ease-in-out;
}

.service-sim-arrow {
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #0066CC, #34C759);
  position: relative;
  border-radius: 2px;
}

.service-sim-arrow::after {
  content: '';
  position: absolute;
  top: -3px;
  right: 0;
  width: 10px;
  height: 10px;
  border-top: 4px solid #34C759;
  border-right: 4px solid #34C759;
  transform: rotate(45deg);
}

.service-sim-flow-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #0066CC;
  border-radius: 50%;
  top: -2px;
  left: 0;
  animation: flowDot 2s infinite linear;
}

.service-sim-dest {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 2;
  animation: floatLight 3s infinite ease-in-out 1.5s;
}

/* Keyframes plugin animation */
@keyframes artSlideIn {
  0% {
    transform: translate(-160px, -60px) scale(0.6);
    opacity: 0;
  }
  20% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
    border-color: #0066CC;
    box-shadow: 0 4px 12px rgba(0,102,204,0.15);
  }
  30% {
    transform: translate(0, 0) scale(0.85);
    opacity: 1;
    border-color: rgba(255,255,255,0);
    box-shadow: none;
    background: transparent;
  }
  75% {
    transform: translate(0, 0) scale(0.85);
    opacity: 1;
    border-color: rgba(255,255,255,0);
    box-shadow: none;
    background: transparent;
  }
  85% {
    transform: translate(160px, 60px) scale(0.6);
    opacity: 0;
  }
  100% {
    transform: translate(160px, 60px) scale(0.6);
    opacity: 0;
  }
}

@keyframes statusFade {
  0%, 30% { opacity: 0; transform: translateY(4px); }
  35%, 75% { opacity: 1; transform: translateY(0); }
  80%, 100% { opacity: 0; transform: translateY(-4px); }
}

/* Keyframes service animation */
@keyframes flowDot {
  0% { left: 0; opacity: 1; background: #0066CC; }
  50% { background: #34C759; }
  100% { left: 100%; opacity: 0; background: #34C759; }
}

@keyframes floatLight {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Manual vs Automated workflow grids */
.flow-comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
  margin-top: 48px;
}

@media (max-width: 800px) {
  .flow-comparison-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.flow-step-item {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.flow-step-num {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: #86868B;
  background: #F5F5F7;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.flow-step-item.success-style .flow-step-num {
  background: rgba(52, 199, 89, 0.1);
  color: #34C759;
}