/* ==========================================================================
   Photo Maxs — core stylesheet
   Scope prefix: .pm-
   1.  Tokens
   2.  Base & typography
   3.  Shared components (pill, heading, buttons, image fallback)
   4.  Header / navigation
   5.  Hero
   6.  Logo strip
   7.  Features rail
   8.  How it works
   9.  Why us
   10. Pricing
   11. FAQ
   12. Support CTA
   13. Footer
   14. Motion
   ========================================================================== */

/* 1. TOKENS ================================================================ */
:root{
  /* brand */
  --pm-brand:        #6C6CFF;
  --pm-brand-600:    #5A57F0;
  --pm-brand-700:    #4A45D6;
  --pm-brand-100:    #EDEDFF;
  --pm-brand-050:    #F5F5FF;

  /* ink */
  --pm-ink:          #0F1226;
  --pm-ink-700:      #2C3050;
  --pm-ink-500:      #5B6183;
  --pm-ink-400:      #7C82A1;

  /* surfaces */
  --pm-white:        #FFFFFF;
  --pm-canvas:       #FAFAFE;
  --pm-tint:         #F3F4FD;
  --pm-line:         #E6E7F4;
  --pm-line-soft:    #EFF0F9;

  /* elevation */
  --pm-sh-xs: 0 1px 2px rgba(15,18,38,.05);
  --pm-sh-sm: 0 2px 6px rgba(15,18,38,.05), 0 10px 24px -14px rgba(15,18,38,.18);
  --pm-sh-md: 0 4px 12px rgba(15,18,38,.05), 0 24px 48px -28px rgba(24,26,66,.34);
  --pm-sh-lg: 0 8px 22px rgba(15,18,38,.06), 0 44px 80px -40px rgba(24,26,66,.42);
  --pm-sh-brand: 0 14px 34px -14px rgba(108,108,255,.55);

  /* geometry */
  --pm-r-sm: 12px;
  --pm-r-md: 18px;
  --pm-r-lg: 26px;
  --pm-r-xl: 34px;
  --pm-pad-section: 80px;

  /* type */
  --pm-font-display: 'Urbanist', 'Segoe UI', system-ui, sans-serif;
  --pm-font-body: 'Instrument Sans', 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --pm-ease: cubic-bezier(.22,.68,.36,1);
}

/* 2. BASE & TYPOGRAPHY ===================================================== */
*,
*::before,
*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:110px; overflow-x:clip; }

body{
  margin:0;
  background:var(--pm-white);
  color:var(--pm-ink-700);
  font-family:var(--pm-font-body);
  font-size:16px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5{
  font-family:var(--pm-font-display);
  color:var(--pm-ink);
  font-weight:700;
  letter-spacing:-.028em;
  line-height:1.1;
  margin:0;
}

p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

a{ color:var(--pm-brand-700); text-decoration:none; transition:color .18s var(--pm-ease); }
a:hover{ color:var(--pm-brand); }

img{ max-width:100%; display:block; }

:focus-visible{
  outline:2px solid var(--pm-brand);
  outline-offset:3px;
  border-radius:6px;
}

.container{ max-width:1200px; }

.pm-skip{
  position:absolute; left:16px; top:-60px; z-index:2000;
  background:var(--pm-ink); color:#fff; padding:10px 18px; border-radius:10px;
  transition:top .2s var(--pm-ease);
}
.pm-skip:focus{ top:16px; color:#fff; }

.pm-section{ padding:var(--pm-pad-section) 0; position:relative; }

/* 3. SHARED COMPONENTS ===================================================== */

/* --- pill / eyebrow --- */
.pm-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 16px;
  border-radius:100px;
  background:var(--pm-brand-050);
  border:1px solid #E2E2FB;
  color:var(--pm-brand-700);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:-.005em;
  margin-bottom:18px;
}
.pm-pill--hero{
  background:rgba(255,255,255,.78);
  border-color:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  box-shadow:var(--pm-sh-sm);
  color:var(--pm-ink-700);
}
.pm-pill__dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--pm-brand);
  box-shadow:0 0 0 4px rgba(108,108,255,.18);
}

/* --- section heading (reference: attachment 8) --- */
.pm-head{ text-align:center; margin:0 auto 42px; }
.pm-head__title{
  font-size:clamp(2rem, 1.35rem + 2.6vw, 3.15rem);
  font-weight:700;
  margin-bottom:16px;
}
.pm-head__title span{ color:var(--pm-brand); display:inline-block; }
.pm-head__sub{
  color:var(--pm-ink-500);
  font-size:1.0625rem;
  max-width:600px;
  margin:0 auto;
}
.pm-head__title--left,
.pm-head__sub--left{ text-align:left; margin-left:0; }

/* --- buttons --- */
.pm-btn{
  --pm-btn-bg:var(--pm-ink);
  --pm-btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px;
  border:1px solid transparent;
  border-radius:100px;
  background:var(--pm-btn-bg);
  color:var(--pm-btn-fg);
  font-family:var(--pm-font-body);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:-.008em;
  white-space:nowrap;
  cursor:pointer;
  transition:transform .18s var(--pm-ease), box-shadow .18s var(--pm-ease), background .18s var(--pm-ease), color .18s var(--pm-ease);
}
.pm-btn:hover{ color:var(--pm-btn-fg); transform:translateY(-1px); }
.pm-btn:active{ transform:translateY(0); }

.pm-btn--dark{ background:var(--pm-ink); color:#fff; box-shadow:0 10px 22px -14px rgba(15,18,38,.85); }
.pm-btn--dark:hover{ background:#1B1F3D; box-shadow:0 14px 26px -14px rgba(15,18,38,.9); }

.pm-btn--brand{ background:var(--pm-brand); color:#fff; box-shadow:var(--pm-sh-brand); }
.pm-btn--brand:hover{ background:var(--pm-brand-600); color:#fff; }

.pm-btn--light{ background:#fff; color:var(--pm-brand-700); box-shadow:0 10px 24px -14px rgba(10,12,40,.5); }
.pm-btn--light:hover{ background:#fff; color:var(--pm-brand-700); }

.pm-btn--outline{
  background:rgba(255,255,255,.72);
  color:var(--pm-ink);
  border-color:var(--pm-line);
  backdrop-filter:blur(8px);
}
.pm-btn--outline:hover{ background:#fff; border-color:#D8DAEE; color:var(--pm-ink); }

.pm-btn--ghost{ background:transparent; color:var(--pm-ink); border-color:var(--pm-line); }
.pm-btn--ghost:hover{ color:var(--pm-ink); background:var(--pm-tint); }

.pm-btn--lg{ padding:15px 30px; font-size:1rem; }
.pm-btn--block{ width:100%; }

/* --- image fallback (applied by JS when a remote photo fails) --- */
.pm-img{ width:100%; height:100%; object-fit:cover; }
.pm-img.is-missing{
  font-size:0;          /* hides alt text so a failed photo stays a clean panel */
  color:transparent;
  background:
    radial-gradient(120% 90% at 20% 10%, #DADCF8 0%, transparent 60%),
    linear-gradient(140deg, #EEF0FF 0%, #E2E6FA 48%, #F6F1FA 100%);
}

/* 4. HEADER =============================================================== */
.pm-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:1030;
  padding-top:18px;
  transition:padding .28s var(--pm-ease);
}
.pm-header.is-stuck{ padding-top:10px; }

.pm-nav{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:10px 12px 10px 22px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.9);
  border-radius:100px;
  box-shadow:0 2px 8px rgba(15,18,38,.04), 0 18px 40px -30px rgba(15,18,38,.5);
  backdrop-filter:blur(16px) saturate(160%);
  transition:box-shadow .28s var(--pm-ease), background .28s var(--pm-ease);
}
.pm-header.is-stuck .pm-nav{
  background:rgba(255,255,255,.94);
  box-shadow:0 2px 10px rgba(15,18,38,.06), 0 22px 44px -30px rgba(15,18,38,.6);
}

.pm-brand{ display:inline-flex; align-items:center; gap:10px; color:var(--pm-ink); max-width: 180px;}
.pm-brand:hover{ color:var(--pm-ink); }
.pm-brand__mark{ width:34px; height:34px; display:block; }
.pm-brand__mark svg{ width:100%; height:100%; }
.pm-brand__name{
  font-family:var(--pm-font-display);
  font-weight:700;
  font-size:1.22rem;
  letter-spacing:-.03em;
}

.pm-nav__menu{ display:flex; align-items:center; gap:22px; }
.pm-nav__list{ display:flex; align-items:center; gap:4px; }
.pm-nav__link{
  display:block;
  padding:9px 15px;
  border-radius:100px;
  color:var(--pm-ink-500);
  font-size:.94rem;
  font-weight:500;
  transition:color .18s var(--pm-ease), background .18s var(--pm-ease);
}
.pm-nav__link:hover{ color:var(--pm-ink); background:var(--pm-tint); }
.pm-nav__link.is-active{ color:var(--pm-ink); font-weight:600; }
.pm-nav__cta{ display:flex; align-items:center; gap:10px; }

.pm-burger{
  display:none;
  width:44px; height:44px;
  border:1px solid var(--pm-line);
  border-radius:14px;
  background:#fff;
  padding:0;
  align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
  cursor:pointer;
}
.pm-burger span{
  display:block; width:17px; height:1.8px; border-radius:2px;
  background:var(--pm-ink);
  transition:transform .24s var(--pm-ease), opacity .18s var(--pm-ease);
}
.pm-burger[aria-expanded="true"] span:first-child{ transform:translateY(3.4px) rotate(45deg); }
.pm-burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.4px) rotate(-45deg); }

/* 5. HERO ================================================================= */
.pm-hero{
  position:relative;
  padding:170px 0 0;
  overflow:hidden;
  isolation:isolate;
}
.pm-hero__sky{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(90% 60% at 50% -8%, #FFFFFF 0%, rgba(255,255,255,0) 55%),
    radial-gradient(70% 48% at 12% 4%,  #DCDCFF 0%, rgba(220,220,255,0) 62%),
    radial-gradient(70% 50% at 88% 8%,  #CFD6FF 0%, rgba(207,214,255,0) 60%),
    linear-gradient(180deg, #C9CEFF 0%, #DDE1FF 34%, #EEF0FE 66%, #FFFFFF 100%);
}
.pm-cloud{
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle at 40% 40%, rgba(255,255,255,.95), rgba(255,255,255,0) 68%);
  filter:blur(2px);
}
.pm-cloud--1{ width:520px; height:220px; top:6%;  left:-8%;  opacity:.85; }
.pm-cloud--2{ width:420px; height:180px; top:24%; right:-6%; opacity:.75; }
.pm-cloud--3{ width:680px; height:240px; top:52%; left:22%;  opacity:.6; }
.pm-cloud--4{ width:340px; height:150px; top:38%; left:8%;   opacity:.5; }

.pm-hero__fade{
  position:absolute; inset:auto 0 0 0; height:180px; z-index:-1;
  background:linear-gradient(180deg, rgba(255,255,255,0), #fff 78%);
}

.pm-hero__inner{ position:relative; text-align:center; }

.pm-hero__title{
  font-size:clamp(2.6rem, 1.3rem + 5.4vw, 4.6rem);
  font-weight:800;
  letter-spacing:-.042em;
  line-height:1.02;
  margin-bottom:20px;
}
.pm-hero__sub{
  max-width:540px; margin:0 auto;
  color:var(--pm-ink-500);
  font-size:1.09rem;
}
.pm-hero__actions{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  margin-top:30px;
}
.pm-hero__note{
  margin-top:16px;
  color:var(--pm-ink-400);
  font-size:.86rem;
}

/* --- hero stage --- */
.pm-stage{
  position:relative;
  margin:52px auto 0;
  max-width:920px;
  min-height:520px;
  display:flex; align-items:flex-start; justify-content:center;
}

.pm-stage__side{
  position:absolute;
  top:96px;
  width:194px;
  margin:0;
  padding:10px 10px 12px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.9);
  border-radius:22px;
  box-shadow:var(--pm-sh-md);
  backdrop-filter:blur(10px);
}
.pm-stage__side img{ height:216px; border-radius:14px; }
.pm-stage__side figcaption{
  margin-top:10px;
  font-size:.76rem;
  font-weight:600;
  color:var(--pm-ink-500);
  text-align:center;
}
.pm-stage__side--left{ left:14px; }
.pm-stage__side--left img{ filter:grayscale(.55) saturate(.5) contrast(.92) brightness(1.02); }
.pm-stage__side--right{ right:14px; }
.pm-stage__side--right img{ filter:saturate(1.14) contrast(1.05); }

.pm-stage__swap{
  position:absolute;
  top:196px;
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--pm-brand);
  color:#fff;
  box-shadow:var(--pm-sh-brand);
  z-index:3;
}
.pm-stage__swap svg{ width:19px; height:19px; }
.pm-stage__swap--l{ left:222px; }
.pm-stage__swap--r{ right:222px; }

/* --- device / before-after --- */
.pm-device{
  --pm-pos:52%;
  position:relative;
  z-index:2;
  width:308px;
  padding:9px;
  background:linear-gradient(160deg,#fff 0%, #F2F3FE 100%);
  border:1px solid rgba(255,255,255,.9);
  border-radius:40px;
  box-shadow:var(--pm-sh-lg);
}
.pm-device__notch{
  position:absolute; top:18px; left:50%; transform:translateX(-50%);
  width:78px; height:9px; border-radius:100px;
  background:var(--pm-ink);
  opacity:.9; z-index:5;
}
.pm-device__screen{
  position:relative;
  border-radius:32px;
  overflow:hidden;
  aspect-ratio:308/400;
  background:var(--pm-tint);
  cursor:ew-resize;
  touch-action:none;
}
.pm-device__base{ position:absolute; inset:0; filter:saturate(1.12) contrast(1.06); }

.pm-device__raw{
  position:absolute; inset:0;
  clip-path:inset(0 calc(100% - var(--pm-pos)) 0 0);
}
.pm-device__raw img{
  position:absolute; inset:0;
  filter:grayscale(.5) saturate(.45) contrast(.88) brightness(1.03);
}
.pm-device__raw::after{
  content:"";
  position:absolute; top:0; bottom:0; right:0;
  width:2px;
  background:rgba(255,255,255,.9);
  box-shadow:0 0 12px rgba(15,18,38,.28);
}

.pm-device__grid{
  position:absolute; inset:0;
  opacity:.32;
  pointer-events:none;
}
.pm-device__grid svg{ width:100%; height:100%; }
.pm-device__grid path{ fill:none; stroke:#fff; stroke-width:.7; }

.pm-device__handle{
  position:absolute;
  top:50%; left:var(--pm-pos);
  transform:translate(-50%,-50%);
  width:44px; height:44px;
  display:grid; place-items:center;
  padding:0;
  border:none;
  border-radius:50%;
  background:#fff;
  color:var(--pm-brand-700);
  box-shadow:0 6px 18px rgba(15,18,38,.28);
  cursor:ew-resize;
  z-index:4;
}
.pm-device__handle svg{ width:19px; height:19px; }

.pm-device__chips{
  position:absolute; left:50%; bottom:-22px;
  transform:translateX(-50%);
  display:flex; gap:7px;
  z-index:4;
}
.pm-chip{
  padding:7px 13px;
  border-radius:100px;
  background:rgba(255,255,255,.9);
  border:1px solid var(--pm-line-soft);
  box-shadow:var(--pm-sh-sm);
  font-size:.74rem;
  font-weight:600;
  color:var(--pm-ink-700);
  backdrop-filter:blur(8px);
  white-space:nowrap;
}
.pm-chip--brand{ background:var(--pm-brand); border-color:var(--pm-brand); color:#fff; }

/* 6. LOGO STRIP =========================================================== */
.pm-logos{ padding:26px 0 8px; }
.pm-logos__label{
    text-align: center;
    color: var(--pm-ink-400);
    font-size: .84rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.pm-logos__row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:16px 46px;
}
.pm-logos__row li{
  font-family:var(--pm-font-display);
  font-size:1.18rem;
  font-weight:600;
  letter-spacing:-.03em;
  color:var(--pm-ink);
  opacity:.34;
  transition:opacity .2s var(--pm-ease);
}
.pm-logos__row li:hover{ opacity:.7; }

/* 7. FEATURES ============================================================= */
.pm-features{ background:var(--pm-white); }

.pm-rail{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-left:12px;
  scrollbar-width:none;
  margin:0 -12px;
  padding:6px 0 34px;
}
.pm-rail::-webkit-scrollbar{ display:none; }

.pm-rail__track{
  display:flex;
  gap:20px;
  padding:0 12px;
  width:max-content;
  align-items:flex-start;
}

.pm-fcard{
  scroll-snap-align:start;
  width:270px;
  flex:0 0 auto;
  display:flex; flex-direction:column;
  background:var(--pm-white);
  border:1px solid var(--pm-line);
  border-radius:var(--pm-r-lg);
  box-shadow:var(--pm-sh-sm);
  overflow:hidden;
  margin-top:38px;
  transition:box-shadow .24s var(--pm-ease), border-color .24s var(--pm-ease);
}
.pm-fcard--tall{ margin-top:0; }
.pm-fcard:hover{ box-shadow:var(--pm-sh-md); border-color:#DCDEF2; }

.pm-fcard__text{ padding:26px 24px 20px; }
.pm-fcard__text h3{
  font-size:1.52rem;
  line-height:1.15;
  min-height:2.3em;      /* holds two lines so every card's copy starts level */
  margin-bottom:10px;
}
.pm-fcard__text p{
  color:var(--pm-ink-500);
  font-size:.925rem;
  line-height:1.6;
}

.pm-fcard__media{
  position:relative;
  margin-top:auto;
  height:186px;
  background:var(--pm-tint);
}
.pm-fcard--tall .pm-fcard__media{ height:252px; }
.pm-fcard__media > .pm-img{ position:absolute; inset:0; }

/* mock overlays */
.pm-mock{
  position:absolute;
  left:14px; right:14px;
  display:flex; flex-direction:column; gap:8px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 12px 28px -16px rgba(15,18,38,.6);
  backdrop-filter:blur(10px);
  font-size:.78rem;
  color:var(--pm-ink-700);
}
.pm-mock__title{ font-weight:600; font-size:.8rem; }
.pm-mock__meta{ color:var(--pm-ink-400); font-size:.72rem; }

.pm-mock__swatches{ display:flex; gap:6px; }
.pm-mock__swatches b{
  width:20px; height:20px; border-radius:6px;
  border:1px solid rgba(15,18,38,.12);
}
.pm-mock__swatches b.is-alpha{
  background-image:
    linear-gradient(45deg,#D5D8EA 25%,transparent 25%,transparent 75%,#D5D8EA 75%),
    linear-gradient(45deg,#D5D8EA 25%,#fff 25%,#fff 75%,#D5D8EA 75%);
  background-size:10px 10px;
  background-position:0 0, 5px 5px;
}

/* transparency checkerboard revealed behind a cut-out subject */
.pm-cutout{
  position:absolute; inset:0;
  clip-path:polygon(0 0, 42% 0, 42% 100%, 0 100%);
  background-image:
    linear-gradient(45deg,#DFE2F0 25%,transparent 25%,transparent 75%,#DFE2F0 75%),
    linear-gradient(45deg,#DFE2F0 25%,#F7F8FD 25%,#F7F8FD 75%,#DFE2F0 75%);
  background-size:16px 16px;
  background-position:0 0, 8px 8px;
}

/* coarse pixel grid over the un-upscaled half */
.pm-pixelate{
  position:absolute; inset:0 58% 0 0;
  background-image:
    linear-gradient(rgba(15,18,38,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,18,38,.16) 1px, transparent 1px);
  background-size:13px 13px;
  backdrop-filter:blur(1.5px) contrast(.94);
}

.pm-badge{
  position:absolute; top:14px; right:14px;
  padding:5px 11px;
  border-radius:100px;
  background:var(--pm-ink);
  color:#fff;
  font-family:var(--pm-font-display);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:-.02em;
}

.pm-mock--cutout{ bottom:16px; }

.pm-mock--retouch{ bottom:16px; }
.pm-mock__slide{ display:flex; align-items:center; gap:10px; }
.pm-mock__slide i{
  flex:0 0 46px;
  font-style:normal; font-size:.72rem; font-weight:600; color:var(--pm-ink-500);
}
.pm-mock__slide b{
  flex:1; height:5px; border-radius:100px; background:#E4E6F4; overflow:hidden;
}
.pm-mock__slide b em{ display:block; height:100%; border-radius:100px; background:var(--pm-brand); }

.pm-mock--upscale{ bottom:16px; }
.pm-mock--upscale .pm-mock__title{ font-variant-numeric:tabular-nums; }

.pm-mock--filters{ bottom:16px; padding:10px; }
.pm-mock__films{ display:flex; gap:6px; }
.pm-mock__films b{
  flex:1;
  padding:16px 4px 6px;
  border-radius:9px;
  font-size:.63rem;
  font-weight:600;
  text-align:center;
  color:#fff;
  text-shadow:0 1px 3px rgba(15,18,38,.5);
}
.pm-mock__films .f-1{ background:linear-gradient(160deg,#C89A6B,#8A5F3C); }
.pm-mock__films .f-2{ background:linear-gradient(160deg,#5AA8D6,#2C4E8A); }
.pm-mock__films .f-3{ background:linear-gradient(160deg,#9AA0AE,#3E4350); }
.pm-mock__films b.is-on{ outline:2px solid var(--pm-brand); outline-offset:2px; }

.pm-mock--batch{ bottom:16px; }
.pm-mock__bar{
  display:block; height:6px; border-radius:100px; background:#E4E6F4; overflow:hidden;
}
.pm-mock__bar i{ display:block; height:100%; border-radius:100px; background:var(--pm-brand); }

.pm-mock--color{ bottom:16px; }
.pm-mock__spectrum{
  position:relative; display:block; height:6px; border-radius:100px;
  background:linear-gradient(90deg,#FF6B6B,#FFD166,#63D471,#4CC9F0,#7B7BFF,#F075C0);
}
.pm-mock__spectrum i{
  position:absolute; left:58%; top:50%;
  transform:translate(-50%,-50%);
  width:14px; height:14px; border-radius:50%;
  background:#fff; box-shadow:0 1px 4px rgba(15,18,38,.4);
}
.pm-mock__steps{ display:flex; justify-content:space-between; }
.pm-mock__steps b{ font-size:.68rem; font-weight:600; color:var(--pm-ink-400); }
.pm-mock__steps b.is-on{ color:var(--pm-brand-700); }

.pm-rail__nav{ display:flex; justify-content:center; gap:10px; }
.pm-rail__btn{
  width:44px; height:44px;
  display:grid; place-items:center;
  border:1px solid var(--pm-line);
  border-radius:50%;
  background:#fff;
  color:var(--pm-ink);
  cursor:pointer;
  transition:background .18s var(--pm-ease), border-color .18s var(--pm-ease), opacity .18s var(--pm-ease);
}
.pm-rail__btn svg{ width:18px; height:18px; }
.pm-rail__btn:hover{ background:var(--pm-tint); border-color:#D8DAEE; }
.pm-rail__btn[disabled]{ opacity:.32; cursor:default; }

/* 8. HOW IT WORKS ========================================================= */
.pm-how{ background:var(--pm-canvas); }

.pm-steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
  padding:58px 0 54px;
}

.pm-step{ position:relative; display:flex; flex-direction:column; }

.pm-step__tag{
  position:absolute;
  display:inline-flex; align-items:center;
  font-family:var(--pm-font-display);
  font-size:.9rem;
  font-weight:600;
  color:var(--pm-ink-400);
  letter-spacing:-.01em;
}
.pm-step__tag--up{ top:-46px; left:6px; }
.pm-step__tag--down{ bottom:-44px; left:6px; }
.pm-step__tag--right{ left:auto; right:6px; }
.pm-arc{ width:74px; height:36px; color:#C6C9E0; }
.pm-arc--a{ margin-left:6px; }
.pm-arc--b{ margin-left:6px; }
.pm-arc--c{ margin-right:6px; }

.pm-step__card{
  background:#fff;
  border:1px solid var(--pm-line);
  border-radius:var(--pm-r-lg);
  box-shadow:var(--pm-sh-sm);
  padding:24px 20px 20px;
  text-align:center;
}
.pm-step__card h3{ font-size:1.24rem; margin-bottom:18px; }

.pm-step__visual{
  display:flex; flex-direction:column; gap:9px;
  padding:16px 14px;
  height:180px;
  border-radius:var(--pm-r-md);
  background:var(--pm-tint);
  text-align:left;
  justify-content:center;
}
.pm-field{
  display:block;
  padding:9px 12px;
  border-radius:10px;
  background:#fff;
  border:1px solid var(--pm-line);
  font-size:.8rem;
  color:var(--pm-ink-700);
}
.pm-field i{
  display:block;
  font-style:normal;
  font-size:.66rem;
  color:var(--pm-ink-400);
  margin-bottom:1px;
}
.pm-step__btn{
  display:block;
  margin-top:2px;
  padding:10px 14px;
  border-radius:10px;
  background:var(--pm-brand);
  color:#fff;
  font-size:.8rem;
  font-weight:600;
  text-align:center;
}
.pm-step__btn--dark{ background:var(--pm-ink); }

.pm-optrow{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
  border-radius:10px;
  background:#fff;
  border:1px solid var(--pm-line);
  font-size:.8rem;
}
.pm-optrow b{ font-weight:600; color:var(--pm-ink); }
.pm-optrow em{ font-style:normal; color:var(--pm-ink-400); }
.pm-optrow.is-on{
  background:var(--pm-brand);
  border-color:var(--pm-brand);
  box-shadow:var(--pm-sh-brand);
}
.pm-optrow.is-on b,
.pm-optrow.is-on em{ color:#fff; }

.pm-step__visual--dash{ flex-direction:row; gap:10px; align-items:stretch; }
.pm-dash__side{
  flex:0 0 46px;
  display:flex; flex-direction:column; gap:7px;
  padding:10px 8px;
  border-radius:10px;
  background:#fff;
  border:1px solid var(--pm-line);
}
.pm-dash__side i{ display:block; height:7px; border-radius:3px; background:#E1E3F2; }
.pm-dash__side i:first-child{ background:var(--pm-brand); }
.pm-dash__grid{
  flex:1;
  display:grid; grid-template-columns:repeat(3,1fr); gap:7px;
}
.pm-dash__grid i{
  display:block; border-radius:8px; min-height:38px;
  background:#fff; border:1px solid var(--pm-line);
}
.pm-dash__grid i:nth-child(2){ background:linear-gradient(150deg,#DDDEFF,#F1F0FE); border-color:#DDDEFF; }
.pm-dash__grid i:nth-child(4){ background:linear-gradient(150deg,#E8E6FB,#F6F4FE); border-color:#E4E2F8; }

.pm-step__visual--drop{ justify-content:center; }
.pm-step__visual--export{ justify-content:center; }

.pm-formats{ display:flex; gap:6px; }
.pm-formats b{
  flex:1;
  padding:7px 0;
  border-radius:9px;
  background:#fff;
  border:1px solid var(--pm-line);
  font-size:.7rem;
  font-weight:600;
  color:var(--pm-ink-500);
  text-align:center;
}
.pm-formats b.is-on{ background:var(--pm-brand); border-color:var(--pm-brand); color:#fff; }

.pm-share{
  display:block;
  padding:9px 12px;
  border-radius:10px;
  background:#fff;
  border:1px solid var(--pm-line);
}
.pm-share i{
  display:block; font-style:normal;
  font-size:.66rem; color:var(--pm-ink-400);
}
.pm-share em{
  font-style:normal; font-size:.76rem; font-weight:500; color:var(--pm-brand-700);
  word-break:break-all;
}
.pm-drop{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:20px 12px;
  border:1.5px dashed #C9CCE6;
  border-radius:12px;
  background:rgba(255,255,255,.7);
  color:var(--pm-ink-500);
  font-size:.8rem;
  font-weight:500;
}
.pm-drop svg{ width:20px; height:20px; color:var(--pm-brand); }

.pm-step__copy{
  margin-top:18px;
  padding:0 6px;
  color:var(--pm-ink-500);
  font-size:.96rem;
  line-height:1.62;
  text-align:center;
}

/* 9. WHY US =============================================================== */
.pm-why{ background:#fff; }

.pm-wcard{
  height:100%;
  display:flex; flex-direction:column; align-items:center;
  padding:32px 26px 30px;
  background:#fff;
  border:1px solid var(--pm-line);
  border-radius:var(--pm-r-lg);
  box-shadow:var(--pm-sh-xs);
  text-align:center;
  transition:box-shadow .24s var(--pm-ease), transform .24s var(--pm-ease);
}
.pm-wcard:hover{ box-shadow:var(--pm-sh-md); transform:translateY(-3px); }
.pm-wcard__icon{
  width:54px; height:54px;
  display:grid; place-items:center;
  border-radius:16px;
  background:var(--pm-brand-050);
  border:1px solid #E4E4FB;
  color:var(--pm-brand-700);
  margin-bottom:20px;
}
.pm-wcard__icon svg{ width:24px; height:24px; }
.pm-wcard h3{ font-size:1.22rem; margin-bottom:12px; }
.pm-wcard p{ color:var(--pm-ink-500); font-size:.925rem; }

.pm-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:64px;
  border:1px solid var(--pm-line);
  border-radius:var(--pm-r-lg);
  background:linear-gradient(180deg,#FCFCFF,#F6F7FE);
  overflow:hidden;
}
.pm-stat{
  padding:28px 24px;
  text-align:center;
  border-right:1px solid var(--pm-line-soft);
}
.pm-stat:last-child{ border-right:none; }
.pm-stat b{
  display:block;
  font-family:var(--pm-font-display);
  font-size:2.1rem;
  font-weight:700;
  letter-spacing:-.04em;
  color:var(--pm-ink);
  line-height:1.1;
}
.pm-stat span{ font-size:.855rem; color:var(--pm-ink-400); }

/* 10. PRICING ============================================================= */
.pm-pricing{ position:relative; overflow:hidden; background:#fff; }
.pm-pricing__inner{ position:relative; z-index:1; }
.pm-pricing__sky{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 42% at 50% 0%, #E3E6FF 0%, rgba(227,230,255,0) 62%),
    radial-gradient(50% 40% at 8% 74%, #EDEBFF 0%, rgba(237,235,255,0) 60%),
    radial-gradient(50% 40% at 94% 82%, #E1E8FF 0%, rgba(225,232,255,0) 60%);
}

.pm-toggle{
  display:inline-flex;
  gap:4px;
  padding:5px;
  margin:-32px auto 46px;
  border-radius:100px;
  background:#fff;
  border:1px solid var(--pm-line);
  box-shadow:var(--pm-sh-sm);
  position:relative;
  left:50%; transform:translateX(-50%);
}
.pm-toggle__btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 20px;
  border:none;
  border-radius:100px;
  background:transparent;
  color:var(--pm-ink-500);
  font-family:var(--pm-font-body);
  font-size:.92rem;
  font-weight:600;
  cursor:pointer;
  transition:background .2s var(--pm-ease), color .2s var(--pm-ease);
}
.pm-toggle__btn em{
  font-style:normal;
  font-size:.72rem;
  font-weight:600;
  padding:3px 8px;
  border-radius:100px;
  background:var(--pm-brand-050);
  color:var(--pm-brand-700);
}
.pm-toggle__btn.is-on{ background:var(--pm-ink); color:#fff; }
.pm-toggle__btn.is-on em{ background:rgba(255,255,255,.16); color:#fff; }

.pm-plan{
  height:100%;
  display:flex; flex-direction:column;
  padding:30px 26px 30px;
  background:#fff;
  border:1px solid var(--pm-line);
  border-radius:var(--pm-r-lg);
  box-shadow:var(--pm-sh-sm);
  text-align:center;
}
.pm-plan__for{
  font-size:.82rem;
  color:var(--pm-ink-400);
}
.pm-plan__name{
  font-size:1.34rem;
  margin:2px 0 12px;
}
.pm-plan__price{
  font-family:var(--pm-font-display);
  font-size:2.9rem;
  font-weight:700;
  letter-spacing:-.045em;
  line-height:1;
  color:var(--pm-ink);
  display:flex; align-items:baseline; justify-content:center; gap:8px;
  min-height:46px;
}
.pm-plan__price small{
  font-family:var(--pm-font-body);
  font-size:.82rem;
  font-weight:500;
  letter-spacing:0;
  color:var(--pm-ink-400);
}
.pm-plan__meta{
  margin:12px 0 22px;
  font-size:.8rem;
  color:var(--pm-ink-400);
  min-height:40px;
}
.pm-plan__list{
  margin-top:26px;
  text-align:left;
}
.pm-plan__list li{
  position:relative;
  padding-left:27px;
  margin-bottom:13px;
  font-size:.885rem;
  color:var(--pm-ink-700);
  line-height:1.5;
}
.pm-plan__list li::before{
  content:"";
  position:absolute; left:0; top:.32em;
  width:17px; height:17px;
  border-radius:50%;
  background:var(--pm-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;
}

.pm-plan--featured{
  background:linear-gradient(168deg, #7B7BFF 0%, #6C6CFF 40%, #5450E8 100%);
  border-color:transparent;
  box-shadow:0 24px 54px -24px rgba(84,80,232,.65);
  padding-top:38px;
  padding-bottom:38px;
}
.pm-plan--featured .pm-plan__for{ color:rgba(255,255,255,.75); }
.pm-plan--featured .pm-plan__name,
.pm-plan--featured .pm-plan__price{ color:#fff; }
.pm-plan--featured .pm-plan__price small,
.pm-plan--featured .pm-plan__meta{ color:rgba(255,255,255,.82); }
.pm-plan--featured .pm-plan__list li{ color:rgba(255,255,255,.94); }
.pm-plan--featured .pm-plan__list li::before{
  background:rgba(255,255,255,.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;
}

/* 11. FAQ ================================================================= */
.pm-faq{ background:#fff; }
.pm-faq__head{ position:sticky; top:130px; }

.pm-acc__item{
  background:#fff;
  border:1px solid var(--pm-line) !important;
  border-radius:var(--pm-r-md) !important;
  margin-bottom:12px;
  overflow:hidden;
  transition:box-shadow .22s var(--pm-ease), border-color .22s var(--pm-ease);
}
.pm-acc__item:has(.accordion-button:not(.collapsed)){
  border-color:#D7D7FA;
  box-shadow:var(--pm-sh-md);
}
.pm-acc .accordion-header{ margin:0; }
.pm-acc .accordion-button{
  padding:20px 22px;
  background:#fff;
  border:none;
  box-shadow:none !important;
  font-family:var(--pm-font-display);
  font-size:1.075rem;
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--pm-ink);
}
.pm-acc .accordion-button:not(.collapsed){ color:var(--pm-brand-700); background:#fff; }
.pm-acc .accordion-button::after{
  width:22px; height:22px;
  background-size:22px;
  transform:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C82A1' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M8 12h8M12 8v8'/%3E%3C/svg%3E");
}
.pm-acc .accordion-button:not(.collapsed)::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A45D6' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E");
}
.pm-acc .accordion-body{
  padding:0 22px 22px;
  color:var(--pm-ink-500);
  font-size:.95rem;
  max-width:62ch;
}

/* 12. SUPPORT CTA ========================================================= */
.pm-cta{
  position:relative;
  padding:92px 0 96px;
  overflow:hidden;
  background:
    radial-gradient(70% 60% at 50% 12%, #F1EDFB 0%, rgba(241,237,251,0) 62%),
    linear-gradient(180deg, #FBFBFF 0%, #F4F4FE 100%);
}
.pm-cta__fan{
  position:absolute;
  left:50%; top:36px;
  width:1180px;
  height:330px;
  transform:translateX(-50%);
  pointer-events:none;
}
.pm-fan{
  position:absolute;
  width:132px; height:168px;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 22px 44px -26px rgba(24,26,66,.55);
}
.pm-fan img{ filter:saturate(1.2) contrast(1.04); }
.pm-fan::after{
  content:"";
  position:absolute; inset:0;
  mix-blend-mode:screen;
  opacity:.55;
}
.pm-fan--1{ left:20px;  top:150px; transform:rotate(-26deg); }
.pm-fan--1::after{ background:linear-gradient(150deg,#8FD8FF,transparent 62%); }
.pm-fan--2{ left:172px; top:74px;  transform:rotate(-18deg); }
.pm-fan--2::after{ background:linear-gradient(150deg,#FFD79A,transparent 62%); }
.pm-fan--3{ left:340px; top:20px;  transform:rotate(-8deg); }
.pm-fan--3::after{ background:linear-gradient(150deg,#FF9EC4,transparent 62%); }
.pm-fan--4{ left:512px; top:6px;   transform:rotate(0deg); }
.pm-fan--4::after{ background:linear-gradient(150deg,#B7A6FF,transparent 62%); }
.pm-fan--5{ left:684px; top:20px;  transform:rotate(8deg); }
.pm-fan--5::after{ background:linear-gradient(150deg,#FFB48A,transparent 62%); }
.pm-fan--6{ left:852px; top:74px;  transform:rotate(18deg); }
.pm-fan--6::after{ background:linear-gradient(150deg,#7FE6C8,transparent 62%); }
.pm-fan--7{ left:1010px;top:150px; transform:rotate(26deg); }
.pm-fan--7::after{ background:linear-gradient(150deg,#9AB6FF,transparent 62%); }

.pm-cta__inner{
  position:relative;
  text-align:center;
  padding-top:294px;
}
.pm-cta__title{
  font-size:clamp(2.3rem, 1.1rem + 4.6vw, 4rem);
  font-weight:800;
  letter-spacing:-.042em;
  line-height:1.04;
  margin-bottom:16px;
}
.pm-cta__sub{
  max-width:520px; margin:0 auto;
  color:var(--pm-ink-500);
  font-size:1.05rem;
}
.pm-cta__actions{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  margin-top:28px;
}
.pm-cta__note{ margin-top:16px; font-size:.85rem; color:var(--pm-ink-400); }

/* 13. FOOTER ============================================================== */
.pm-footer{
  background:#F6F7FC;
  border-top:1px solid var(--pm-line);
  padding:72px 0 26px;
}
.pm-footer__top{ padding-bottom:52px; }
.pm-brand--footer{ margin-bottom:16px;  max-width: 200px; }
.pm-footer__blurb{
  color:var(--pm-ink-500);
  font-size:.925rem;
  max-width:340px;
}
.pm-social{ display:flex; gap:9px; margin-top:22px; }
.pm-social a{
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--pm-line);
  color:var(--pm-ink-500);
  transition:color .18s var(--pm-ease), border-color .18s var(--pm-ease), background .18s var(--pm-ease);
}
.pm-social svg{ width:16px; height:16px; }
.pm-social a:hover{ color:var(--pm-brand-700); border-color:#D7D7FA; background:var(--pm-brand-050); }

.pm-footer__title{
  font-size:1.02rem;
  font-weight:600;
  margin-bottom:16px;
}
.pm-footer__list li{ margin-bottom:10px; }
.pm-footer__list a, .pm-footer__list li{
  color:var(--pm-ink-500);
  font-size:.925rem;
}
.pm-footer__list a:hover{ color:var(--pm-ink); }

.pm-sub{
  position:relative;
  display:flex; gap:8px; flex-wrap:wrap;
  margin-top:18px;
}
.pm-sub__input{
  flex:1 1 190px;
  min-width:0;
  padding:12px 16px;
  border:1px solid var(--pm-line);
  border-radius:100px;
  background:#fff;
  font-family:var(--pm-font-body);
  font-size:.92rem;
  color:var(--pm-ink);
  transition:border-color .18s var(--pm-ease), box-shadow .18s var(--pm-ease);
}
.pm-sub__input::placeholder{ color:var(--pm-ink-400); }
.pm-sub__input:focus{
  outline:none;
  border-color:var(--pm-brand);
  box-shadow:0 0 0 4px rgba(108,108,255,.14);
}
.pm-sub__msg{
  flex:1 0 100%;
  min-height:20px;
  margin-top:2px;
  font-size:.82rem;
  color:var(--pm-brand-700);
}
.pm-sub__msg.is-error{ color:#C0392B; }

.pm-footer__bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding-top:24px;
  border-top:1px solid var(--pm-line);
  color:var(--pm-ink-400);
  font-size:.96rem;
}
.pm-footer__bar ul{ display:flex; gap:22px; flex-wrap:wrap; }
.pm-footer__bar a{ color:var(--pm-ink-400); }
.pm-footer__bar a:hover{ color:var(--pm-ink); }

/* 14. MOTION ============================================================== */
/* One orchestrated page-load sequence in the hero, plus a single ordered
   reveal for the numbered steps. Nothing else animates on scroll. */
.pm-hero__inner > *{
  opacity:0;
  transform:translateY(14px);
  animation:pmRise .7s var(--pm-ease) forwards;
}
.pm-hero__inner > *:nth-child(1){ animation-delay:.05s; }
.pm-hero__inner > *:nth-child(2){ animation-delay:.13s; }
.pm-hero__inner > *:nth-child(3){ animation-delay:.21s; }
.pm-hero__inner > *:nth-child(4){ animation-delay:.29s; }
.pm-hero__inner > *:nth-child(5){ animation-delay:.35s; }
.pm-hero__inner > .pm-stage{ animation-delay:.42s; animation-duration:.85s; }

@keyframes pmRise{
  to{ opacity:1; transform:translateY(0); }
}

.pm-step{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .55s var(--pm-ease), transform .55s var(--pm-ease);
}
.pm-step.is-in{ opacity:1; transform:none; }
.pm-steps.is-in .pm-step:nth-child(1){ transition-delay:0s; }
.pm-steps.is-in .pm-step:nth-child(2){ transition-delay:.09s; }
.pm-steps.is-in .pm-step:nth-child(3){ transition-delay:.18s; }
.pm-steps.is-in .pm-step:nth-child(4){ transition-delay:.27s; }

.no-js .pm-step,
.pm-no-motion .pm-step{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    transition-duration:.001ms !important;
  }
  .pm-hero__inner > *,
  .pm-step{ opacity:1; transform:none; }
}